شرح CSS Border Color وBorder Shorthand مع تخصيص الاتجاهات
في هذا المقال سنتعرف على كيفية التحكم في ألوان الحدود (Borders) باستخدام CSS. سنتناول الخاصية الأساسية border-color بالإضافة إلى خصائص الاتجاهات مثل border-top-color وborder-right-color وborder-bottom-color وborder-left-color. وأخيرًا سنشرح الكتابة المختصرة border وكيفية استخدامها مع كل اتجاه.
1. border-color
تُستخدم لتحديد لون جميع الحدود في نفس الوقت. القيم الممكنة تشمل:
- أسماء ألوان:
red,blue - HEX:
#ff0000 - RGB:
rgb(255,0,0) - HSL:
hsl(0,100%,50%) transparent
أمثلة:
p { border-style: solid; border-color: red; }
p { border-style: solid; border-color: red green; }
p { border-style: solid; border-color: red green blue; }
p { border-style: solid; border-color: red green blue yellow; }
2. خصائص الاتجاهات
يمكنك التحكم في لون كل حد على حدة:
h1 { border-style: solid; border-top-color: red; }
h1 { border-style: solid; border-right-color: green; }
h1 { border-style: solid; border-bottom-color: blue; }
h1 { border-style: solid; border-left-color: orange; }
3. border (Shorthand)
خاصية مختصرة تجمع: السمك، الأسلوب، اللون.
p { border: 3px solid red; }
الحدود بالاتجاهات:
p { border-top: 4px dashed green; }
p { border-right: 5px double blue; }
p { border-bottom: 6px solid orange; }
p { border-left: 2px dotted purple; }
الخاتمة
التحكم في الحدود جزء أساسي من تصميم واجهات المستخدم باستخدام CSS. باستخدام هذه الخصائص يمكنك إنشاء تصميمات احترافية أكثر وضوحًا وتنظيمًا.