نمط الحدود خاصية اللون
مثال
غيّر لون الحدود الأربعة لعنصر <div> إلى اللون الأحمر:
document.getElementById("myDiv").style.borderColor = "red";
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تقوم خاصية borderColor بتعيين أو إرجاع لون حدود العنصر.
يمكن أن تأخذ هذه الخاصية من قيمة واحدة إلى أربع قيم:
- قيمة واحدة ، مثل: p {border-color: red} - ستكون الحدود الأربعة حمراء
- قيمتان ، مثل: p {border-color: red transparent} - سيكون الحد العلوي والسفلي أحمر ، والحد الأيسر والأيمن شفاف
- ثلاث قيم ، مثل: p {border-color: red green blue} - الحد العلوي باللون الأحمر ، والحد الأيسر والأيمن باللون الأخضر ، والحد السفلي باللون الأزرق
- أربع قيم ، مثل: p {border-color: red green blue yellow} - الحد العلوي باللون الأحمر ، والحد الأيمن باللون الأخضر ، والحد السفلي باللون الأزرق ، والحد الأيسر باللون الأصفر
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
بناء الجملة
قم بإرجاع خاصية borderColor:
object.style.borderColor
قم بتعيين خاصية borderColor:
object.style.borderColor = "color|transparent|initial|inherit"
قيم الملكية
| Value | Description |
|---|---|
| color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
| transparent | The color of the border is transparent (underlying content will shine through) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
| القيمة الافتراضية: | اللون الحالي |
|---|---|
| قيمة الإرجاع: | سلسلة ، تمثل لون حد العنصر |
| إصدار CSS | CSS1 |
مزيد من الأمثلة
مثال
غيّر لون الحد العلوي والسفلي إلى اللون الأخضر ، والحد الأيسر والأيمن إلى اللون الأرجواني لعنصر <div>:
document.getElementById("myDiv").style.borderColor = "green purple";
مثال
إرجاع لون حد عنصر <div>:
alert(document.getElementById("myDiv").style.borderColor);
الصفحات ذات الصلة
دروس CSS: CSS Border
مرجع CSS: خاصية لون الحدود
مرجع DOM HTML: خاصية الحدود