خصائص Style borderColor

تعريف والاستخدام

borderColor يضبط أو يعود لون حدود العنصر.

يمكن لهذا الخصائص استخدام واحد إلى أربعة أرقام:

  • قيمة واحدة، مثل: p {لون الحدود: الأحمر} - جميع الأطراف الأربعة لونها أحمر
  • إثنين من القيم، مثل: p {border-color: red transparent} - الحواف العلوية والسفلية بالأحمر، الحواف اليسرى واليمنى شفافة
  • ثلاثة قيم، مثل: p {border-color: red green blue}- الحافة العلوية بالأحمر، الحواف اليمنى واليسرى بالأخضر، الحافة السفلية بالأزرق
  • أربعة قيم، مثل: p {border-color: red green blue yellow} - الحافة العلوية بالأحمر، الحافة اليمنى بالأخضر، الحافة السفلية بالأزرق، الحافة اليسرى بالأصفر

يرجى الرجوع أيضًا إلى:

دليل CSS:حواف CSS

دليل CSS:خصائص borderColor

دليل HTML DOM:خصائص الحافة

مثال

مثال 1

تغيير لون الحافة للـ <div> العنصر إلى اللون الأحمر:

document.getElementById("myDiv").style.borderColor = "red";

جرب بنفسك

مثال 2

تغيير لون الحافة للـ <div> العنصر العلوية والسفلية إلى اللون الأخضر، ولون الحافة اليسرى واليمنى إلى اللون البنفسجي:

document.getElementById("myDiv").style.borderColor = "green purple";

جرب بنفسك

مثال 3

يعود لون الحافة للـ <div> العنصر:

alert(document.getElementById("myDiv").style.borderColor);

جرب بنفسك

النحو

يعود borderColor الخاصية:

الشيء.style.borderColor

ضبط خصائص borderColor:

الشيء.style.borderColor = "اللون|شفاف|افتراضي|وراثي"

قيمة الخصوصية

القيمة وصف
اللون

يحدد هذا اللون لون الحافة. اللون الافتراضي هو الأسود.

يرجى الرجوع إلى قيم الألوان CSS، للحصول على قائمة كاملة بالألوان المحتملة.
شفاف لون الحافة شفاف (المحتوى الأساسي سيظهر من خلالها).
initial اضبط هذا الخصوصية على قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصوصية من عنصر الأب. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية: الأسود
القيمة المعدلة: السلسلة، التي تعبر عن لون حافة العنصر.
إصدار CSS: CSS1

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذه الخاصية تمامًا.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5