CSS/border

الخاصية border في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: border-color و border-style و border-width، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية border لا يمكن أن تُستخدَم لتحديد قيمة للخاصية border-image وإنما ستضبِط قيمتها إلى القيمة الابتدائية none.

border: 1px;
border: 2px dotted;
border: medium dashed green;

من المستحسن استخدام الخاصية border إذا كانت تريد ضبط جميع الإطارات إلى قيمة واحدة، فلو أردتَ أن يكون لكل طرف من الإطار قيمةٌ خاصةٌ به فربما يجدر بك استخدام الخاصيات border-width و border-style و border-color التي تسمح كلُ واحدةٍ منها بضبط ما يصل إلى أربع قيم (قيمة لكل جانب من جوانب الإطار)، بينما الخاصية border تسمح لك بضبط قيمة واحدة التي ستُطبّق على جميع جوانب الإطار التابعة للعنصر.

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

أمثلة

سنستعرض في المثال الآتي ثلاث طرائق لتحديد إطار العنصر، لاحظ أنَّ الخاصيات التي لن تُحدَّد قيمتها عبر الخاصية المختصرة border سيُعاد ضبط قيمتها إلى القيمة الابتدائية.

شيفرة HTML:

<div>
  <div class="solid">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="dotted">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="dashed">
    Lorem ipsum dolor sit amet.
  </div>
</div>

شيفرة CSS:

div > div {
  float: left;
  margin: 10px;
}

.solid {
  border-style: dotted;
  border: solid;
}

.dotted {
  border: 2px dotted;
}

.dashed {
  border: medium dashed green;
}

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

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

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

هذه الخاصية تختصر ثلاثة خاصيات، التي يمكن تحديد قيمها بأي ترتيب، ويمكن حذف قيمة أو قيمتين من تلك القيم.

القيمة <br-width>

ثخن الإطار، القيمة الافتراضية هي medium، راجع صفحة الخاصية border-width للتفاصيل.

القيمة <br-style>

شكل الإطار، القيمة الافتراضية هي none، راجع صفحة الخاصية border-style للتفاصيل.

القيمة <color>

لون الإطار، القيمة الافتراضية هي قيمة الخاصية color (أي currentColor)، راجع صفحة الخاصية border-color للتفاصيل.

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

border: <br-width> || <br-style> || <color>;

يمكن وضع القيم بأي ترتيبٍ تشاء.

<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

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

• مواصفة CSS Backgrounds and Borders Module Level 3. أصبحت الخاصية border تُعيد ضبط قيمة الخاصية border-image إلى none.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.