CSS/border-style

الخاصية المختصرة border-style في CSS تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).

/* الكلمات المحجوزة */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* vertical | horizontal */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed; 

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

ملاحظة: القيمة الابتدائية للخاصية border-style هي none، وهذا يعني أنَّه حتى لو ضبطتَ الخاصيتين border-width و border-color، فلن تتمكن من رؤية الإطار إلى أنَّ تُغيّر قيمة هذه الخاصية إلى أيّ قيمة عدا none أو hidden.

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

أمثلة

هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-style. شيفرة HTML:

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

شيفرة CSS:

table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}

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

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

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

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

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

وكل قيمة من القيم المُحدَّدة يجب أن تكون كلمة محجوزةً من القيم المذكورة أدناه.

القيمة <br-style>

تصف هذه القيمة ما هو شكل الإطار، ويمكن أن تكون إحدى الكلمات المحجوزة الآتية:

none		تشبه الكلمة المحجوزة hidden، إذ تؤدي إلى عدم عرض إطار. *ملاحظة*
hidden		تشبه الكلمة المحجوزة none، إذ تؤدي إلى عدم عرض إطار. *ملاحظة*
dotted		عرض سلسلة من النقط، والتباعد بينها ليس مُعرّفًا من المواصفة، وإنما هو تابع للمتصفح.
dashed		عرض سلسة من الشرطات -، وطولها والتباعد بينها ليس معرّفًا من المواصفة، وإنما هو تابع للمتصفح.
solid		عرض خط مستقيم مليء.
double		عرض خطين مستقيمين مليئين.
groove		عرض الإطار كأنه منحوت أو منقوش، وهذه القيمة عكس القيمة ridge.
ridge		عرض الإطار كأنه منبثق، وهذه القيمة عكس القيمة groove.
inset		عرض الإطار بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس القيمة outset.
outset		عرض الإطار بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس القيمة inset.

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

border-style: <br-style>{1,4};

حيث:

<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

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

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