13. تعمق في نموذج الصندوق: الحدود (Borders)

الحدود هي الخط الذي يقع بين الحشوة والهامش، ويحدد بصرياً حافة العنصر.

خصائص الحدود الثلاث الأساسية

لرؤية الحدود، يجب عليك تعريف جميع هذه الخصائص الثلاث:

1. border-width: مدى سمك الخط (مثل 1px أو medium).
2. border-style: مظهر الخط (مثل solid أو dotted أو dashed أو double).
3. border-color: لون الخط.

1. مثال مفصل

css .card { border-width: 3px; border-style: solid; border-color: black; }

2. اختصار الحدود

من الشائع أكثر استخدام خاصية الاختصار border:

css /* التنسيق: العرض، النمط، اللون */ .card-shorthand { border: 2px dashed red; }

الجوانب الفردية

يمكنك تنسيق الحدود في جوانب فردية باستخدام خصائص مثل border-top و border-right وما إلى ذلك، أو عن طريق تعيين خصائص محددة لجانب معين (مثل border-bottom-style: double;).

css /* حدود سفلية فقط */ .footer { border-bottom: 5px solid navy; }

/* أنماط مختلفة على جوانب مختلفة */ .badge { border-top: 1px solid gray; border-bottom: 5px double black; }

انحناء الحدود (Border Radius)

لإنشاء زوايا مستديرة، استخدم خاصية border-radius. القيمة الشائعة للعناصر الدائرية هي 50%.

css .rounded-box { border-radius: 10px; /* ينطبق على الزوايا الأربع */ }

.circular-image { width: 100px; height: 100px; border-radius: 50%; /* يجعل الصندوق دائرة أو شكلاً بيضاوياً مثاليًا */ }