CSS/border-top-style

الخاصية border-top-style في CSS تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.

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

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

ملاحظة: لا تُعرِّف المواصفة كيف ستلتقي الإطارات التي لها أشكال مختلفة في الزوايا.

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

هذا مثال عن جدول <table> يُبيّن مختلف أشكال الإطارات عبر الخاصية border-top-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:

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

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

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

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

القيمة <br-style>

تقبل الخاصية border-top-style كلمةً محجوزةً من الكلمات المحجوزة المتاحة للخاصية border-style.

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

border-top-style: <br-style>;

حيث:

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

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

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