English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS border-color 属性使用方法及示例

border-color CSS属性是用于设置单个边框颜色属性,即一个简写速记属性;border-top-color،border-right-color،border-bottom-colorborder-left-color为单一的声明。

下表为此属性的用法说明和版本历史记录,以及该属性在javascript脚本中的使用语法。

默认值:查看全部属性
适用于:所有元素
继承:没有
可动画制作:是。请参考 动画属性
版本:CSS 1،2،3
JavaScript语法:object object.style.borderColor="#cc0000 red"

استخدام نحو خاصية border-color

نموذج هذا الخصائص هو:

border-color: [ color | transparent ] 1 to 4 values | inherit

يمكن استخدام هذا المختصر المختصر بجمع قيم متميزة واحدة، إثنتين، ثلاثة أو أربعة.

  • إذا تم تحديدقيمة واحدة، فإنها تطبق على جميع الهوامش.

  • إذا تم تحديدقيمتين، فإن القيمة الأولى تُستخدم للهوامش العلوية والسفلية، والقيمة الثانية تُستخدم للهوامش اليمنى واليسرى.

  • إذا تم تحديدثلاثة قيم، فإن القيمة الأولى تُستخدم للهوامش العلوية، والقيمة الثانية تُستخدم للهوامش اليمنى واليسرى، والقيمة الثالثة تُستخدم للهوامش السفلية

  • إذا تم تحديدأربعة قيم، فإن كل قيمة ستطبق على الهوامش بناءً على الترتيب: أعلى، يمين، أسفل، وشمال.

المثال أدناه يوضح كيفية استخدام الخاصية border-color.

  p {
   border-style: solid;
   border-color: #ff0000;
  }
اختبار ل‹/›

ملاحظة:يجب أن تدلي ببيان الخاصيةborder-styleعليك أن تدلي ببيان الخاصية border-color قبل أن يمكنك تعيين لون الهوامش، لأنborder-styleقيمة الخاصية الافتراضية هي none.

قيمة الخاصية

جدول أدناه يصف قيم الخاصية.

القيمةالوصف
colorتحديد لون الهوامش. شاهدقيم الألوان CSSللحصول على قائمة بالألوان المحتملة.
شفافيسمح للهوامش بأن تكون شفافة، رغم أن ذلك قد يأخذborder-widthالمكان المخصص للخصائص.
initialقم بتعيين الخاصية إلى قيمتها الافتراضية.
inheritإذا تم تحديد، فإن العنصر المرتبط يستخدم قيمة الخاصية border-color للعنصر الأم.

متوافق مع المتصفحات

متوافق مع متصفحات border-color الخاصية، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح الذي يدعم الخاصية؛ جميع المتصفحات الرئيسية تدعم الخاصية.

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 4+

قراءة المزيد

شاهد الدروس التالية:CSS Border،CSS3 Border

الخصائص ذات الصلة:border،border-style،border-width،border-top-color،border-right-color،border-bottom-color،border-left-color