الخاصية border-style

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية المختصرة 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.
القيمة الابتدائية لكل قيمة مختصرة:
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
القيمة المحسوبة لكل قيمة مختصرة:

أمثلة

هذا مثال عن جدول <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

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