الحدود (Borders) هي خطوط تحيط بالعناصر، وتُستخدم لإبرازها أو تزيينها. و في هذا الدرس سنتعرف على كيفية التحكم بشكل الحدود باستخدام CSS.
1. إضافة حدود لعنصر
لإضافة حد بسيط حول عنصر، نستخدم الخاصية border.
مثال:
border: 2px solid black;
هذا يعني:
- سمك الحد: 2px
- نوع الحد: خط صلب (solid)
- لون الحد: أسود (black)
2. أنواع خطوط الحدود
يمكن تغيير شكل الخط عبر اختيار نوع الحد، مثل:
border-style: solid; /* خط صلب */
border-style: dotted; /* نقاط متقطعة */
border-style: dashed; /* خط متقطع */
border-style: double; /* خط مزدوج */
border-style: groove; /* خط محفور */
border-style: ridge; /* خط بارز */
border-style: inset; /* خط غائر */
border-style: outset; /* خط بارز للخارج */
3. تحديد أبعاد الحدود
يمكن تحديد عرض الحد باستخدام border-width:
border-width: 5px;
أو بشكل مفصل لكل جانب:
border-top-width: 3px;
border-right-width: 5px;
border-bottom-width: 3px;
border-left-width: 5px;
4. تغيير لون الحدود
لتغيير لون الحدود نستخدم border-color:
border-color: red;
ويمكن تخصيص لون لكل جانب:
border-top-color: blue;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: pink;
5. حدود مستديرة الزوايا
لجعل زوايا الحدود دائرية نستخدم الخاصية border-radius:
border-radius: 10px;
كلما زادت القيمة، أصبحت الزوايا أكثر انحناءً.
مثال عملي كامل
border: 3px dashed blue;
border-radius: 15px;
background-color: #f0f0f0;
padding: 20px;
الواجب العملي
- صمّم صندوقًا بإطار ملوّن وحدود مستديرة الزوايا.
- جرّب استخدام أنواع خطوط مختلفة للحدود (
dotted,dashed,double, إلخ). - غيّر ألوان الحدود لكل جانب بشكل مختلف.
