خاصية نصف قطر الحدود
آخر تحديث: 2026-09-13
border-radius خاصية نصف قطر الحدود
تُدوّر الخاصية border-radius زوايا العنصر الحادة، مما يجعلها إحدى أكثر الخصائص الزخرفية استخداماً في تصميم واجهات المستخدم الحديثة. تقبل قيماً من الطول أو النسب المئوية، وكلما زادت القيمة زاد وضوح التدوير. عندما يصل نصف القطر إلى نصف طول الضلع أو أكثر، يصبح الركن نصف دائرة أو دائرة كاملة.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ];⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<length> | النوع | نصف قطر زاوية ثابت |
<percentage> | النوع | نسبة مئوية بالنسبة لحجم العنصر |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-radius | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10.5 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يعطي border-radius: 50% مع عرض وارتفاع متساويين دائرة مثالية، ويُستخدم عادةً لقص الصور الرمزية (الأفاتار).
تلميح： تقبل من 1 إلى 4 قيم، وصيغة الخط المائل تضبط نصفي القطر الأفقي والرأسي بشكل منفصل، مثل border-radius: 20px / 10px للزوايا البيضاوية.
❓ الأسئلة الشائعة
Qهل يعمل border-radius على عناصر img؟
Aنعم. تُطبَّق border-radius على حافة حدود العنصر (border-box) وتعمل على العناصر المُستبدَلة مثل <img> أيضاً. أعطِ صورة border-radius: 50% مع عرض وارتفاع متساويين للحصول على صورة رمزية دائرية. لاحظ أن محتوى الصورة قد يفيض خارج الزوايا المدوّرة، لذا يُضاف عادةً overflow: hidden على الحاوية.
Qإلى ماذا تشير النسبة المئوية في border-radius؟
Aتُحل النسب المئوية بالنسبة لعرض العنصر وارتفاعه نفسه — نصف القطر الأفقي بالنسبة للعرض ونصف القطر الرأسي بالنسبة للارتفاع. لذا يعطي border-radius: 50% دائرة مثالية على عنصر مربع لكنه يعطي قطع ناقص على مستطيل. هذه حيلة الصور الرمزية الدائرية وأزرار الكبسولة.
Qكيف أرسم دائرة مثالية وشكلاً كبسولياً؟
Aالدائرة: عرض وارتفاع متساويان مع border-radius: 50%. الكبسولة: border-radius: 999px — عندما تتجاوز القيمة نصف الارتفاع، يصبح الطرفان تلقائياً نصفَي دائرة كاملين. على مستطيل، يعطي 50% قطع ناقص، لذا استخدم للكبسولات 999px أو قيمة بكسل ثابتة كبيرة.
Qماذا تعني صيغة الخط المائل border-radius: 20px / 10px؟
Aالجانب الأيسر من الخط المائل هو نصف القطر الأفقي والجانب الأيمن هو الرأسي، مما ينتج زوايا بيضاوية. على سبيل المثال، يعطي border-radius: 50% / 25% قوساً أفقياً أعرض من الرأسي. بدون الخط المائل، يكون نصفا القطر متساويين. يمكنك أيضاً كتابة مجموعتين مفصولتين بخط مائل لتشكيل كل زاوية من الزوايا الأربع بشكل مستقل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
