| رؤوس الأعمدة: الخاصية أو المفهوم | طريقة العمل والتركيب البرمجي | الاستخدام الشائع ونموذج كتابة الكود |
|---|---|---|
| border-width | يحدد درجة ثخانة أو نحافة الإطار الخارجي للعنصر | يقبل قيم ثابتة بالبكسل px أو وحدات نسبية em أو كلمات جاهزة مثل ثين وميديام وثيك |
| border-style | يحدد الشكل البصري والنمط الخاص بالإطار مثل خط متصل أو متقطع | يقبل قيم متعددة ومشهورة مثل solid للخط المتصل وdashed للمتقطع وdotted للمنقّط ونون لإخفائه تماماً |
| border-color | يحدد اللون الخاص بالإطار المحيط بالعنصر | يقبل جميع صيغ الألوان البرمجية المتاحة في الـ CSS |
| كود الاختصار الشامل border | يجمع خصائص السمك والنوع واللون معاً في سطر واحد بدلاً من كتابة كل خاصية منفصلة | يكتب كالتالي border ومثاله تحديد السمك 2px ثم النوع solid ثم اللون المطلوب |
| تحديد جانب منفصل | يتيح وضع إطار لجهة واحدة معينة دون بقية الجهات الأربع | يكتب كالتالي border-bottom للأسفل أو border-left لليسار وممتاز لعمل خطوط جمالية تحت العناوين |
| border-radius | يتحكم في درجة انحناء ودوران زوايا المربع لتصبح ناعمة | قيمة واحدة تطبق على كل الزوايا وقيمتان تطبقان بشكل قطري تبادلي ولجعل الصندوق دائرة كاملة نحدد القيمة بنسبة 50 بالمئة |
| border-image | يتيح استخدام صورة خارجية أو تدرج ألوان جرادينت كإطار للعنصر بدلاً من الألوان الثابتة | يُستخدم في التصاميم المتقدمة والمبتكرة لإعطاء لمسات فنية فريدة وحصرية للمكونات |
خاصية `border` تتحكم في إطار العنصر. تتكون من ثلاثة أجزاء:
**border-width** — سمك الحد (px, em, thin/medium/thick) **border-style** — نوع الحد: solid | dashed | dotted | double | groove | ridge | inset | outset | none | hidden **border-color** — لون الحد
**الاختصار:** `border: 2px solid #3b82f6;`
**تحديد جانب واحد:** `border-top / border-right / border-bottom / border-left`
**border-radius:** يجعل زوايا العنصر مدورة. - قيمة واحدة: كل الزوايا - قيمتان: أعلى-يسار/أسفل-يمين | أعلى-يمين/أسفل-يسار - `border-radius: 50%` → دائرة كاملة
**border-image:** يستخدم صورة أو gradient كحد.
| 1 | /* حد كامل */ |
| 2 | border: 2px solid #3b82f6; |
| 3 | |
| 4 | /* حد سفلي فقط */ |
| 5 | border-bottom: 3px solid #f59e0b; |
| 6 | |
| 7 | /* زوايا مدورة */ |
| 8 | border-radius: 8px; |
| 9 | border-radius: 50%; /* دائرة */ |
مثال 1: بطاقة بتصميم حديث
| 1 | .card { |
| 2 | border: 1px solid #e2e8f0; |
| 3 | border-radius: 12px; |
| 4 | overflow: hidden; |
| 5 | } |
| 6 | |
| 7 | .card:hover { |
| 8 | border-color: #3b82f6; |
| 9 | box-shadow: 0 0 0 3px rgba(59,130,246,0.15); |
| 10 | } |
| 11 | |
| 12 | /* شارة دائرية */ |
| 13 | .avatar { |
| 14 | width: 48px; |
| 15 | height: 48px; |
| 16 | border-radius: 50%; |
| 17 | border: 3px solid white; |
| 18 | box-shadow: 0 0 0 2px #3b82f6; |
| 19 | } |