الخاصية `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‎.