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

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-image-source</code>}}</noinclude>
الخاصية <code>border-image-source</code> في CSS تُعرِّف صورةً <code>[[CSS/image|<image>]]</code> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى <code>none</code>، فسيُستخدَم الشكل المُعرَّف في الخاصية <code>[[CSS/border-style|border-style]]</code>.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|<code>none</code>، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق.

|}<syntaxhighlight lang="css">
/* لا توجد صورة للإطار */
border-image-source: none;

/* تحديد مسار الصورة التي ستُعرَض في الإطار */
border-image-source: url(image.jpg);

/* استخدام تدرج لوني */
border-image-source: linear-gradient(to top, red, yellow);

/* القيم العامة */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
</syntaxhighlight>ملاحظة: صحيحٌ أنَّ أي نوع من أنواع القيمة <code>[[CSS/image|<image>]]</code> يمكن أن يُستعمَل مع هذه الخاصية، لكن دعم المتصفحات ما يزال محدودًا، وبعض المتصفحات لا تدعم إلا الصور المُعرّفة عبر الدالة <code>url()‎</code>.
== أمثلة ==
راجع صفحة <code>[[CSS/border-image|border-image]]</code> لأمثلة عن سلوك مختلف القيم.
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|15.0
|15.0
|11
|15
|6
|}

== البنية العامة ==
تقبل الخاصية <code>border-image-source</code> إحدى القيمتين الآتيتين:

=== <code>none</code> ===
تُحدِّد أنَّه لا يجب استخدام صورة مع الإطار، وإنما يجب استخدام الشكل المُعرّف في الخاصية <code>[[CSS/border-style|border-style]]</code>.

=== <code>[[CSS/image|<image>]]</code> ===
مرجع إلى صورة لتستخدم في الإطار.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-image-source: none | <image>;

</syntaxhighlight>
== انظر أيضًا ==
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border-image|border-image]]</code> وهي: <code>[[CSS/border-image-slice|border-image-slice]]</code>، و <code>[[CSS/border-image-width|border-image-width]]</code>، و <code>[[CSS/border-image-outset|border-image-outset]]</code>، و <code>[[CSS/border-image-repeat|border-image-repeat]]</code>.
*صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/border|border]]</code> وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#border-image-source CSS Backgrounds and Borders Module Level 3]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Border|{{SUBPAGENAME}}]]