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

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-width</code>}}</noinclude>
الخاصية <code>border-image-width</code> في CSS تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية <code>border-image-width</code> أكبر من قيمة الخاصية <code>[[CSS/border-width|border-width]]</code>، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).<syntaxhighlight lang="css">
/* border-image-width: all */
border-image-width: 3;

/* border-image-width: vertical horizontal */
border-image-width: 2em 3em;

/* border-image-width: top horizontal bottom */
border-image-width: 5% 15% 10%;

/* border-image-width: top right bottom left */
border-image-width: 5% 2em 10% auto;

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

|}

== أمثلة ==
راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن هذه الخاصية.
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|15.0
|15.0
|11
|15
|6
|}

== البنية العامة ==
قد تأخذ هذه الخاصية قيمةً واحدةً أو قيمتين أو ثلاث قيم أو أربع قيم، ويمكن أن تكون القيمة إما طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو الكلمة المحجوزة <code>auto</code>.
* إذا حُدِّدَت قيمة واحدة فستُطبَّق على الحواف الأربع جميعها.
* إذا حُدِّدَت قيمتين فسيُضبَط عرض الحواف الرأسية والأفقية (على التوالي وبالترتيب).
* إذا حُدِّدَت ثلاث قيم فسيُضبَط عرض الحافة العلوية والحواف الأفقية والحافة السفلية (على التوالي وبالترتيب).
* إذا حُدِّدَت أربع قيم فسيُضبَط عرض الحواف العلوية واليمينية والسفلية واليسارية (على التوالي وبالترتيب).
=== القيمة <code>[[CSS/length|<length>]]</code> أو <code>[[CSS/percentage|<percentage>]]</code> ===
تُمثِّل هذه القيمة عرض الإطار، ويمكن أن تكون إما قيمةً مطلقةً أو نسبيةً، والقيم النسبية تُشير إلى أبعاد الإطار نسبةً إلى عرض أو ارتفاع الصورة الموافق. ولا يجوز أن تكون هذه القيمة سالبةً.

=== القيمة <code>[[CSS/number|<number>]]</code> ===
تُمثِّل هذه القيمة عدد المرات التي يجب فيها ضرب قيمة الخاصية <code>[[CSS/border-width|border-width]]</code>، ولا يجوز أن تكون هذه القيمة سالبةً.

=== القيمة <code>auto</code> ===
ستؤدي هذه القيمة إلى ضبط عرض الإطار لما يوافق العرض أو الارتفاع الفعلي للصورة المستخدم، وإذا لم يكن للصورة أبعاد فعلية فستؤخذ القيمة من القيمة المحسوبة للخاصية <code>[[CSS/border-width|border-width]]</code>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-image-width: [ <length-percentage> | <number> | auto ]{1,4};

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>
</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-width CSS Backgrounds and Borders Module Level 3]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Border]]