لون حدود CSS
لون حدود CSS
تُستخدم border-colorالخاصية لتعيين لون الحدود الأربعة.
يمكن ضبط اللون من خلال:
- الاسم - حدد اسم اللون ، مثل "أحمر"
- HEX - حدد قيمة HEX ، مثل "# ff0000"
- RGB - حدد قيمة RGB ، مثل "rgb (255،0،0)"
- HSL - حدد قيمة HSL ، مثل "hsl (0 ، 100٪ ، 50٪)"
- شفاف
ملاحظة: إذا border-colorلم يتم تعيينه ، فإنه يرث لون العنصر.
مثال
عرض لألوان الحدود المختلفة:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
نتيجة:
Red border
Green border
Blue border
ألوان جانبية محددة
يمكن أن تحتوي border-colorالخاصية على قيمة واحدة إلى أربع قيم (للحد العلوي ، والحد الأيمن ، والحد السفلي ، والحد الأيسر).
مثال
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
قيم HEX
يمكن أيضًا تحديد لون الحد باستخدام قيمة سداسية عشرية (HEX):
مثال
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
قيم RGB
أو باستخدام قيم RGB:
مثال
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
قيم HSL
يمكنك أيضًا استخدام قيم HSL:
مثال
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
يمكنك معرفة المزيد حول قيم HEX و RGB و HSL في فصول ألوان CSS الخاصة بنا.