الخاصية border-right

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

الخاصية border-right في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات border-right-color و border-right-style و border-right-width، هذه الخاصيات تصف كيفية عرض الإطار border الأيمن للعنصر.

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

القيمة الابتدائية لكل قيمة مختصرة:
تُطبَّق على جميع العناصر.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة لكل قيمة مختصرة:
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed blue;

وكما في جميع الخاصيات المختصرة، تقوم الخاصية border-right بضبط قيم جميع الخاصيات التي تستطيع ضبطها، حتى لو لم نُحدِّد قيمةً لتلك الخاصيات، لأنها ستضبطها إلى قيمها الابتدائية، وهذا يعني أنَّ الشيفرة:

border-right-style: dotted;
border-right: thick green;

ستصبح في النهاية كما يلي:

border-right-style: dotted;
border-right: none thick green;

لاحظ أنَّ قيمة الخاصية border-right-style المُحدَّدة قبل الخاصية border-right سيتم تجاهلها؛ ولأنَّ القيمة الابتدائية للخاصية border-right-style هي none، فالقواعد السابقة لن تؤدي إلى إظهار إطار أيمن.

أمثلة

سنضبط في المثال الآتي إطارًا على الجانب الأيمن لعناصر <div> لونه (border-right-color) أخضر، وعرضه (border-right-width) يساوي 4px وشكله (border-right-style) منقط. شيفرة HTML:

<div>لهذا العنصر إطارٌ على حافته اليمينية</div>

شيفرة CSS:

div {
  border-right: 4px dotted green;
  padding: 0.5em;
}

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

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

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

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

<br-width>

راجع صفحة الخاصية border-right-width.

<br-style>

راجع صفحة الخاصية border-right-style.

<color>

راجع صفحة الخاصية border-right-color.

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

border-right: <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>

انظر أيضًا

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