الخاصية border

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

شيفرة HTML:
<div>
  <div class="solid">موسوعة حسوب، مرجع المطورين العرب.</div>
  <div class="dotted">موسوعة حسوب، مرجع المطورين العرب.</div>
  <div class="dashed">موسوعة حسوب، مرجع المطورين العرب.</div>
</div>
شيفرة CSS:
div > div {
  float: right;
  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>

انظر أيضًا

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