الخاصية border-color

الخاصية border-color المختصرة في CSS تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (border-top-color) والأيمن (border-right-color) والسفلي (border-bottom-color) والأيسر (border-left-color).

/* تطبيق اللون على جميع الأوجه */ 
border-color: red;
border-color: #ffbb00;
border-color: rgb(255, 0, 0);
border-color: hsla(100%, 50%, 25%, 0.75);
border-color: currentcolor;
border-color: transparent;

/* vertical | horizontal */
border-color: red #f015ca;

/* top | horizontal | bottom */
border-color: red yellow green;

/* top | right | bottom | left */
border-color: red yellow green blue;

/* قيم عامة */
border-color: inherit;
border-color: initial;
border-color: unset;

القيمة الابتدائية	لكل قيمة مختصرة: border-top-color: currentcolor border-right-color: currentcolor border-bottom-color: currentcolor border-left-color: currentcolor
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	لكل قيمة مختصرة: border-bottom-color: اللون المحسوب. border-left-color: اللون المحسوب. border-right-color: اللون المحسوب. border-top-color: اللون المحسوب.

أمثلة

سنعرض في هذا المثال كيفية استخدام الخاصية border-color لتعيين لون الإطار بتحديد قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم، وذلك على عناصر <div>. شيفرة HTML:

<div class="one-value">
border-color: #006699;
</div>
<div class="two-values">
border-color: #006699 salmon;
</div>
<div class="three-values">
border-color: #006699 rgb(150, 125, 175) salmon;
</div>
<div class="four-values">
border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%);
</div>

شيفرة CSS:

div {
  padding: 1.5em;
  margin: 1.5em;
  border-style: solid;
  border-width: 1em;
}
    
.one-value {
  border-color: #006699;
}
.two-values {
  border-color: #006699 salmon;
}
.three-values {
  border-color: #006699 rgb(150, 125, 175) salmon;
}
.four-values {
  border-color: #006699 rgb(150, 125, 175) salmon hsl(39, 100%, 50%);
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4	3.5	1.0

البنية العامة

يمكن تحديد قيمة واحدة للخاصية border-color أو قيمتين أو ثلاث قيم أو أربع قيم.

• عند تحديد قيمة واحدة، فستُطبّق على جميع أوجه الإطار.
• عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الإطارين العلوي والسفلي، والقيمة الثانية على الإطارين الأيمن والأيسر.
• عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الإطار العلوي، والقيمة الثانية على الإطارين الأيمن والأيسر، والقيمة الثالثة على الإطار السفلي.
• عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة).

القيمة <color>

قيمة لونية <color> تُحدِّد ما هو لون الإطار.

البنية الرسمية

border-color: <color>{1,4};

مصادر ومواصفات

• مواصفة CSS Backgrounds and Borders Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.

• مواصفة CSS Level 1.