عرض مصدر CSS/border-style

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-style</code>}}</noinclude>
الخاصية المختصرة <code>border-style</code> في CSS تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).<syntaxhighlight lang="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;
</syntaxhighlight>ملاحظة: [[CSS/initial value|القيمة الابتدائية]] للخاصية <code>border-style</code> هي <code>none</code>، وهذا يعني أنَّه حتى لو ضبطتَ الخاصيتين <code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-color|border-color]]</code>، فلن تتمكن من رؤية الإطار إلى أنَّ تُغيّر قيمة هذه الخاصية إلى أيّ قيمة عدا <code>none</code> أو <code>hidden</code>.
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل قيمة مختصرة:
* <code>[[CSS/border-top-style|border-top-style]]</code>: <code>none</code>
* <code>[[CSS/border-right-style|border-right-style]]</code>: <code>none</code>
* <code>[[CSS/border-bottom-style|border-bottom-style]]</code>: <code>none</code>
* <code>[[CSS/border-left-style|border-left-style]]</code>: <code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
! scope="row" |القيمة المحسوبة
|لكل قيمة مختصرة:
* <code>[[CSS/border-bottom-style|border-bottom-style]]</code>: كما حُدِّدَت.
* <code>[[CSS/border-left-style|border-left-style]]</code>: كما حُدِّدَت.
* <code>[[CSS/border-right-style|border-right-style]]</code>: كما حُدِّدَت.
* <code>[[CSS/border-top-style|border-top-style]]</code>: كما حُدِّدَت.

|}

== أمثلة ==
هذا مثال عن جدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> يُبيّن مختلف أشكال الإطارات عبر الخاصية <code>border-style</code>. شيفرة HTML:<syntaxhighlight lang="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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|5.5
|3.5
|1.0
|}

== البنية العامة ==
يمكن تحديد قيمة واحدة للخاصية <code>border-style</code> أو قيمتين أو ثلاث قيم أو أربع قيم.
* عند تحديد قيمة واحدة، فستُطبّق على جميع أوجه الإطار.
* عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الإطارين العلوي والسفلي، والقيمة الثانية على الإطارين الأيمن والأيسر.
* عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الإطار العلوي، والقيمة الثانية على الإطارين الأيمن والأيسر، والقيمة الثالثة على الإطار السفلي.
* عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة).
وكل قيمة من القيم المُحدَّدة يجب أن تكون كلمة محجوزةً من القيم المذكورة أدناه.

=== القيمة <code><br-style></code> ===
تصف هذه القيمة ما هو شكل الإطار، ويمكن أن تكون إحدى الكلمات المحجوزة الآتية:
<table class="wikitable">
   <tr>
    <td style="vertical-align: middle;"><code>none</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">تشبه الكلمة المحجوزة hidden، إذ تؤدي إلى عدم عرض إطار. *ملاحظة*</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>hidden</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">تشبه الكلمة المحجوزة none، إذ تؤدي إلى عدم عرض إطار. *ملاحظة*</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>dotted</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض سلسلة من النقط، والتباعد بينها ليس مُعرّفًا من المواصفة، وإنما هو تابع للمتصفح.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>dashed</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض سلسة من الشرطات -، وطولها والتباعد بينها ليس معرّفًا من المواصفة، وإنما هو تابع للمتصفح.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>solid</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض خط مستقيم مليء.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>double</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض خطين مستقيمين مليئين.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>groove</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض الإطار كأنه منحوت أو منقوش، وهذه القيمة عكس القيمة <code>ridge</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>ridge</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض الإطار كأنه منبثق، وهذه القيمة عكس القيمة <code>groove</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>inset</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">عرض الإطار بطريقة تجعل العنصر يبدو وكأنه مُضمّن في مكانه، وهي على عكس القيمة <code>outset</code>.</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>outset</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">
     <p>عرض الإطار بطريقة تجعل العنصر يبدو وكأنه بارز عن مكانه، وهي على عكس القيمة <code>inset</code>.</p>
    </td>
   </tr>
 </table>

=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-style: <br-style>{1,4};
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-style CSS Backgrounds and Borders Module Level 3].
* مواصفة ‎[http://www.w3.org/TR/CSS2/box.html#propdef-border-style CSS Level 2 (Revision 1)‎].
* مواصفة ‎[http://www.w3.org/TR/CSS1/#border-style CSS Level 1‎]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Border]]