استدارة الزوايا (Border Radius) في CSS
تعرف رسم حد حاد حول الصندوق. كثيراً يريد التصميم زوايا أنعم — بطاقات ودية، أزرار عصرية، صور رمزية تُقرأ كدوائر. تلك مهمة border-radius: كم تنحني كل زاوية.
ماذا تفعل border-radius؟
border-radius تدور زوايا صندوق الحد. الانحناء يشمل خط الحد والخلفية (وغالباً قص الصورة/overflow). طول أكبر يعني زاوية أكثر استدارة. الوحدة الشائعة px أو %.
قيمة واحدة — الزوايا الأربع
البداية اليومية: طول واحد لكل الزوايا.
نفس نصف القطر لكل زاوية
css.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}ماذا يجب أن تلاحظ؟
الحد يتبع المنحنى والتعبئة البيضاء تبقى داخل الشكل المستدير. نصف القطر ليس حداً ثانياً — إنه يشكّل الصندوق الحالي.
الاختصار: كم قيمة؟
يمكنك تمرير طول واحد أو اثنين أو ثلاثة أو أربعة. ترتيب الزوايا ثابت.
📊 عدد قيم border-radius
| القيم | المعنى | ملاحظة يومية |
|---|---|---|
| 1 | الزوايا الأربع متساوية | بطاقات ولوحات ناعمة |
| 2 | أعلى-يسار + أسفل-يمين، ثم أعلى-يمين + أسفل-يسار | اقتران قطري |
| 3 | أعلى-يسار، أعلى-يمين + أسفل-يسار، أسفل-يمين | أقل شيوعاً — اعرف وجوده |
| 4 | أعلى-يسار، أعلى-يمين، أسفل-يمين، أسفل-يسار | تحكم كامل، مع عقارب الساعة من أعلى-يسار |
أربع زوايا، أربعة أرقام
حين تحتاج كل زاوية منحنى خاصاً، اكتب أربع قيم مع عقارب الساعة بدءاً من أعلى-يسار.
أربع زوايا مختلفة
css.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}قيمتان — أزواج قطرية
طولان يقرنان الزوايا المتقابلة: الأول أعلى-يسار وأسفل-يمين؛ الثاني أعلى-يمين وأسفل-يسار.
نصف قطر بقيمتين قطريتين
css.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}أزرار كبسولة
نصف قطر كبير (غالباً نصف الارتفاع، أو قيمة كبيرة مثل 999px) يحوّل المستطيل إلى كبسولة — شائع للرقائق والإجراءات الرئيسية.
زر بشكل كبسولة
css.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}صور رمزية دائرية
لدائرة حقيقية امنح الصندوق عرضاً وارتفاعاً متساويين ثم border-radius: 50%. على صندوق غير مربّع، 50% يصنع قطعاً ناقصاً لا دائرة.
دائرة بنصف قطر 50 بالمئة
css.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* يقص الصورة داخل الدائرة */
}جرّبها بنفسك
- ليّن بطاقة محدودة بـ
border-radius: 12px. - نسّق شارة بأربعة أنصاف أقطار مختلفة.
- استخدم قيمتين على بلاطة ولاحظ الاقتران القطري.
- ابنِ زر كبسولة بـ
border-radius: 999px. - اصنع صورة 64×64 بـ
border-radius: 50%— ثم جرّب50%على مستطيل عريض وقارن.
أخطاء شائعة
- نصف قطر ضخم على صندوق فارغ بلا حد ولا لون ثم التساؤل لماذا «لا يظهر شيء»
- استخدام
50%على مستطيل عريض وتوقع دائرة كاملة (تحصل على قطع ناقص) - نسيان تساوي العرض والارتفاع للدائرة
- الاعتقاد أن
border-radiusيغني عنborder— ما زلت تحتاج حداً أو تعبئة لرؤية المنحنى بوضوح - خلط ترتيب الزوايا (أربع قيم: مع عقارب الساعة من أعلى-يسار)
ملخص
border-radiusتدور زوايا الصندوق- قيمة واحدة تليّن الكل؛ أربع قيم تتحكم بكل زاوية
- قيمتان تقرنان الزوايا المتقابلة قطرياً
- أنصاف أقطار كبيرة تصنع كبسولات؛
50%على مربع يصنع دائرة - المنحنى يقص الحد والخلفية معاً
- مارس البطاقة والكبسولة والصورة الرمزية حتى تصبح الأشكال واضحة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى