حدود ونصف قطر الحدود CSS

<style>
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* اختصار */
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">حد 2px صلب يلف الصندوق</div>

<style>
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
</style>
<div class="solid">حد صلب</div>
<div class="dotted">حد منقط</div>
<div class="dashed">حد متقطع</div>
<div class="double">حد مزدوج</div>

<style>
.rounded {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 16px;
  background: #f5f5f5;
}
.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #3498db;
}
</style>
<div class="rounded">زوايا مُدوَّرة</div>
<div class="circle">دائرة</div>

<style>
.avatar {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
</style>
<div class="avatar">صورة رمزية</div>

<style>
.pill {
  border-radius: 999px;
  padding: 8px 24px;
  background: #3498db;
  color: white;
}
</style>
<div class="pill">زر كبسولة</div>