CSS: حدود ونصف قطر الحدود CSS
آخر تحديث: 2026-10-13
الحدود ونصف قطر الحدود هي خصائص مهمة لإعطاء العناصر "شكلاً". الحدود تضيف خطوط محيط للعناصر، بينما نصف قطر الحدود يُنعم الزوايا الحادة.
مرجع سريع لخصائص الحدود
| الخاصية | القيم الشائعة | الغرض |
|---|---|---|
border-width |
1px، 2px، medium، thick |
عرض الحدود |
border-style |
solid، dashed، dotted، double، none |
نمط الحدود |
border-color |
#333، red، transparent |
لون الحدود |
border |
2px solid #333 |
اختصار (عرض+نمط+لون) |
border-top/right/bottom/left |
1px dashed red |
حدود جانب واحد |
border-radius |
4px، 50%، 10px 20px |
نصف قطر الزاوية |
border-collapse |
collapse، separate |
وضع طي حدود الجدول |
1. خاصية الحدود
(1) ثلاثة عناصر للحدود
كل حد له ثلاثة عناصر: عرض ونمط ولون.
▶ مثال
▶ جرّب الكود(2) قيم نمط الحدود
▶ مثال
▶ جرّب الكود2. نصف قطر الحدود
border-radius يُدوّر زوايا العناصر:
▶ مثال
▶ جرّب الكود(1) الاستخدامات الشائعة
صورة رمزية دائرية:
HTML
<style>
.avatar {
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
<div class="avatar">صورة رمزية</div>
زر كبسولة:
HTML
<style>
.pill {
border-radius: 999px;
padding: 8px 24px;
background: #3498db;
color: white;
}
</style>
<div class="pill">زر كبسولة</div>
❓ أسئلة شائعة
س ما الفرق بين border-radius: 50% و999px؟
ج 50% نسبي لأبعاد العنصر — المربع يصبح دائرة، المستطيل يصبح قطعاً ناقصاً. 999px قيمة ثابتة كبيرة — طالما تتجاوز نصف الأبعاد، جميع الزوايا تصبح شكلاً "كبسولة" مُدوَّراً بالكامل. نفس التأثير للمربعات، مختلف للمستطيلات.
س هل يمكن استخدام outline و border معاً؟
ج نعم. outline لا يشغل مساحة (لا يؤثر على حجم العنصر)، بينما border يشغل. outline يُستخدم عادةً مع حالة
:focus لتوفير مؤشرات التركيز لمستخدمي لوحة المفاتيح. استخدم outline-offset للتحكم في المسافة بين outline وحدود العنصر.س كيف أعيّن نصف قطر لزوايا فردية؟
ج استخدم
border-top-left-radius، border-top-right-radius، border-bottom-right-radius، border-bottom-left-radius للزوايا الفردية. أو اختصار: border-radius: top-left top-right bottom-right bottom-left;.📖 ملخص
- الحدود ونصف قطر الحدود هي أدوات أساسية لإعطاء عناصر الصفحة "شكلاً"
borderيتحكم في محيط العنصر،border-radiusيُنعم الزوايا الحادة- إتقان التركيبات (مثل
border-radius: 50%للصور الرمزية الدائرية،border: noneلإزالة الافتراضيات) مفيد جداً في التطوير الفعلي
📝 تمارين
- أنشئ بطاقة بحدود ونصف قطر حدود تبدو كـ"بطاقة عمل" — بحدود وزوايا مُدوَّرة وحشو.
- استخدم
border-radius: 50%لإنشاء إطار صورة رمزية دائري. - استخدم تركيبات حدود مختلفة لإنشاء عنصر قائمة بـ"خط سفلي" (حد سفلي فقط).
- جرب أنماط الحدود
dashedوdottedلرؤية اختلافاتها البصرية.
