خاصية لون حدود CSS
مثال
عيّن لونًا للحد:
div {border-color: coral;}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تعيّن border-color
الخاصية لون حدود العنصر الأربعة. يمكن أن يكون لهذه الخاصية من واحد إلى أربع قيم.
إذا كانت خاصية لون الحدود تحتوي على أربع قيم:
- لون الحدود: أحمر أخضر أزرق وردي ؛
- الحد العلوي أحمر
- الحد الأيمن أخضر
- الحد السفلي باللون الأزرق
- الحد الأيسر وردي
إذا كانت خاصية لون الحدود تحتوي على ثلاث قيم:
- لون الحدود: أحمر أخضر أزرق ؛
- الحد العلوي أحمر
- الحدود اليمنى واليسرى خضراء
- الحد السفلي باللون الأزرق
إذا كانت خاصية لون الحدود تحتوي على قيمتين:
- لون الحدود: أحمر أخضر ؛
- الحدود العلوية والسفلية باللون الأحمر
- الحدود اليمنى واليسرى خضراء
إذا كانت خاصية لون الحدود لها قيمة واحدة:
- لون الحدود: أحمر.
- جميع الحدود الأربعة حمراء
ملاحظة: قم دائمًا بتعريف خاصية نمط الحدود قبل border-color
الخاصية. يجب أن يكون للعنصر حدود قبل أن تتمكن من تغيير اللون.
القيمة الافتراضية: | اللون الحالي للعنصر |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS1 |
بناء جملة JavaScript: | الكائن .style.borderColor = "# FF0000 أزرق" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
border-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
بنية CSS
border-color: color|transparent|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
color | Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element | |
transparent | Specifies that the border color should be transparent | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
عيّن لونًا للحدود بقيمة HEX:
div {border-color: #92a8d1;}
مثال
عيّن لونًا للحدود بقيمة RGB:
div {border-color: rgb(201, 76, 76);}
مثال
عيّن لونًا للحدود بقيمة RGBA:
div {border-color: rgba(201, 76, 76, 0.3);}
مثال
عيّن لونًا للحدود بقيمة HSL:
div {border-color: hsl(89, 43%, 51%);}
مثال
عيّن لونًا للحدود بقيمة HSLA:
div {border-color: hsla(89, 43%, 51%, 0.3);}
مثال
قم بتعيين لون حد مختلف لكل جانب من عنصر:
div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}
الصفحات ذات الصلة
دروس CSS: CSS Border
مرجع DOM HTML: خاصية borderColor