عرض مصدر CSS/border-top-width

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-top-width</code>}}</noinclude>
الخاصية <code>border-top-width</code> في CSS تضبط عرض الإطار العلوي للعنصر.<syntaxhighlight lang="css">
/* كلمات مفتاحية */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/* <length> أطوال */
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/* قيم عامة */
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>medium</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|الطول المطلق، أو 0 إذا ضُبِطَت الخاصية <code>[[CSS/border-top-style|border-top-style]]</code> إلى <code>none</code> أو <code>hidden</code>.

|}

== أمثلة ==
سنضبط في المثال الآتي إطارًا علويًا لعناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> لونه (<code>[[CSS/border-top-color|border-top-color]]</code>) أحمر، وعرضه (<code>border-top-width</code>) يساوي <code>4px</code> وشكله (<code>[[CSS/border-top-style|border-top-style]]</code>) منقط. شيفرة HTML:<syntaxhighlight lang="html">
<div>
  This box has a border on the top side.
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
div {
  border-top-style: dotted;
  border-top-width: 4px;
  border-top-color: red;
  padding: 0.5em;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|3.5
|1.0
|}

== البنية العامة ==
=== القيمة <code><br-width></code> ===
تُعرِّف هذه القيمة عرض الإطار، وإما أن تكون طولًا <code>[[CSS/length|<length>]]</code> غير سالب، أو كلمةً محجوزةً؛ ويُسمَح باستخدام الكلمات المحجوزة الآتية:

<table class="wikitable">
  <tr>
    <td style="vertical-align: middle;"><code>thin</code></td>
    <td style="vertical-align: middle;">
    <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">إطار رفيع</td>
  </tr>
  <tr>
    <td style="vertical-align: middle;"><code>medium</code></td>
    <td style="vertical-align: middle;">
    <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">إطار متوسط</td>
  </tr>
  <tr>
    <td style="vertical-align: middle;"><code>thick</code></td>
    <td style="vertical-align: middle;">
    <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;">&nbsp;</div>
    </td>
    <td style="vertical-align: middle;">إطار ثخين</td>
  </tr>
</table>

ملاحظة: لأنَّ المواصفة لا تُحدِّد ما هي القيمة الدقيقة المرتبطة بكل كلمة محجوزة، فقد تختلف النتيجة باختلاف المتصفح، لكن مع ذلك، ستتبع هذه القيم للعلاقة <code>thin ≤ medium ≤ thick</code>، وستكون القيم متناسقة فيما بينها في المستند.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-top-width: <br-width>;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<br-width> = <length> | thin | medium | thick
</syntaxhighlight>

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