خصائص لون الحدود لـ CSS

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

يحدد خاصية border-color لون الجدران الأربعة. يمكنها تحديد لون واحد إلى أربعة ألوان.

خصائص border-color هي خاصية مختصرة يمكن استخدامها لضبط لون جميع أجزاء الجدران الخارجية للأحداث أو تحديد ألوان مختلفة للجدران الأربعة. انظر الأمثلة التالية:

مثال 1

border-color:red green blue pink;
  • الحافة العلوية أرجل
  • الجدار الأيمن أزرق
  • الحافة السفلية زرقاء
  • الحافة اليسرى وردية

مثال 2

border-color:red green blue;
  • الحافة العلوية أرجل
  • الحافة اليمنى واليسرى خضراء
  • الحافة السفلية زرقاء

مثال 3

border-color:dotted red green;
  • الحافة العلوية والسفلية أرجل
  • الحافة اليمنى واليسرى خضراء

مثال 4

border-color:red;
  • كل الأربعة جوانب أرجل

لا تنسى أن نمط الحواف لا يمكن أن يكون none أو hidden، وإلا لن يظهر الحواف.

ملاحظة:عليك دائمًا أن تُعلن صفة border-style قبل صفة border-color. يجب أن يكون العنصر قد حصل على الحواف قبل تغيير لونه.

انظر أيضًا:

دليل CSSحافة CSS

دليل HTML DOMصفة borderColor

مثال

تعيين لون الأربعة جوانب:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

تجربة شخصية

نص CSS

border-color: اللون|شفاف|افتراضي|تنسيقي;

قيمة الصفة

القيمة الوصف
اسم_اللون يحدد لون الحواف باستخدام اسم اللون (مثل red).
رقم_شبكي يحدد لون الحواف باستخدام القيمة الشبكية (مثل #ff0000).
رقم_rgb يحدد لون الحواف باستخدام رمز rgb (مثل rgb(255,0,0)).
شفاف القيمة الافتراضية. لون الحواف شفاف.
inherit يحدد يجب أن يتم تنسيق لون الحواف من العنصر الأم.

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

القيمة الافتراضية: لم يتم تحديده
التنسيقية: لا
الإصدار: CSS1
جافا سكربت النص: عنصر.style.borderColor="#FF0000 blue"

مزيد من الأمثلة

تعيين لون الأربعة جوانب
هذا المثال يوضح كيفية تعيين لون الأربعة جوانب. يمكن تعيين لون واحد إلى أربعة ألوان.

دعم المتصفح

الرقم في الجدول للجدول يوضح أقدم إصدار من المتصفح يدعم الصفة.

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

ملاحظة:لا يدعم متصفح Internet Explorer 6 (وكل الأصدار السابقة) قيمة "transparent" للصفة.

ملاحظة:不支持值 "inherit" في متصفحات Internet Explorer 7 وكل الأصدار السابقة. يحتاج IE8 إلى !DOCTYPE. يدعم IE9 "inherit".