CSS/border-width

الخاصية border-width المختصرة في CSS تضبط عرض إطار العنصر على جميع وجوهه: العلوي (border-top-width) والأيمن (border-right-width) والسفلي (border-bottom-width) والأيسر (border-left-width).

بطاقة الخاصية

القيمة الابتدائية	لكل قيمة مختصرة: border-top-width: medium border-right-width: medium border-bottom-width: medium border-left-width: medium
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
القيمة المحسوبة	لكل قيمة مختصرة: border-bottom-width: طول <length>. border-left-width: طول <length>. border-right-width: طول <length>. border-top-width: طول <length>.

/* كلمات مفتاحية */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> أطوال */
border-width: 4px;
border-width: 1.2rem;

/* vertical عمدوي | horizontal أفقي */
border-width: 2px 1.5em;

/* top الأعلى | horizontal أفقي | bottom الأسفل */
border-width: 1px 2em 1.5cm;

/* top أعلى | right يمين | bottom أسفل | left يسار */
border-width: 1px 2em 0 4rem;

/* قيم عامة */
border-width: inherit;
border-width: initial;
border-width: unset;

أمثلة

سنعرض في هذا المثال كيفية استخدام الخاصية border-width لتعيين عرض الإطار بتحديد قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم، وذلك على عناصر <p>. شيفرة HTML:

<p id="sval">
قيمة واحدة: عرض الحدود بمقدار 6 بكسل من الجهات الأربع</p>

<p id="bival">
قيمتان مختلفتان: 2 بكسل العرض من اللأعلى والأسفل، 10 بكسل العرض من اليمين والشمال</p>

<p id="treval">
 ثلاث قيم مختلفة: 9 بكسل من الأعلى، 0.3em من الأسفل، صفر من اليمين واليسار </p>

<p id="fourval">
    أربع قيم مختلفة: "thin" من اليسار،  "medium" من الأعلى،  "thick"  من الأسفل، 
1em  من اليمين</p>

شيفرة CSS:

#sval {
  border: dashed #ccc;
  border-width: 6px;
}
#bival {
  border: solid salmon;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 1em;
  padding: 1em;
}

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

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

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

يمكن تحديد قيمة واحدة للخاصية border-width أو قيمتين أو ثلاث قيم أو أربع قيم.

• عند تحديد قيمة واحدة، فستُطبّق على جميع أوجه الإطار.
• عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الإطارين العلوي والسفلي، والقيمة الثانية على الإطارين الأيمن والأيسر.
• عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الإطار العلوي، والقيمة الثانية على الإطارين الأيمن والأيسر، والقيمة الثالثة على الإطار السفلي.
• عند تحديد أربع قيم، فستُطبّق القيم على الوجه العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الوجه العلوي ثم يستمر وفق اتجاه عقارب الساعة).

<br-width>

تُعرِّف هذه القيمة عرض الإطار، وإما أن تكون طولًا <length> غير سالب، أو كلمةً محجوزةً؛ ويُسمَح باستخدام الكلمات المحجوزة الآتية:

thin		إطار رفيع
medium		إطار متوسط
thick		إطار ثخين

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

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

border-width: <br-width>{1,4};

حيث:

<br-width> = <length> | thin | medium | thick

 انظر أيضًا

• صفحة الخاصية border والخاصيات الأخرى التي تضبطها وهي: border-style، و border-color.
• صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي border-top، والإطاري السفلي border-bottom، والإطار اليميني border-right، والإطار اليساري border-left.
• ضبط صورة للإطار باستخدام الخاصية border-image.
• الأركان المدورة border-radius.

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

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