الدرس 35

استدارة الأركان باستخدام border-radius

المعنى	Stand For	Name
استدارة أركان العنصر		border-radius

تقدر تحول أركان البوكس الحادة لأركان مستديرة باستخدام border-radius

ومش لازم يكون فيه border مرسومة علشان الاستدارة تظهر على الخلفية

<div class="box">Rounded Corners</div>

.box {
  width: 260px;
  padding: 20px;
  background-color: lightblue;
  border-radius: 16px;
}

القيمة الواحدة بتتطبق على الأربع أركان زودها إلى 30px ولاحظ زيادة الاستدارة

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

تقدر تستبدل سطر border-radius بالأربع خواص أو تكتب نفس النتيجة باختصار

border-radius: 10px 20px 30px 40px;

الترتيب هنا للأركان بيبدأ من أعلى الشمال ثم أعلى اليمين ثم أسفل اليمين ثم أسفل الشمال

<div class="circle"></div>

.circle {
  width: 120px;
  height: 120px;
  background-color: blue;
  border-radius: 50%;
}

العرض والارتفاع متساويين ومع 50% الشكل بقى دايرة

لو العرض والارتفاع مختلفين هتشوف شكل بيضاوي

.box {
  width: 260px;
  padding: 20px;
  background-color: lightblue;
  border-radius: 999px;
}

القيمة الكبيرة بتخلي الأطراف مدورة على قد المساحة المتاحة

فالشكل يبقى شبه الكبسولة

اعمل عنصر يستدير فيه أعلى الشمال وأسفل اليمين فقط

وسيب الركنين التانيين بقيمة 0

آخر تعديل للدرس: 19/10/2026