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

<noinclude>{{DISPLAYTITLE:الخاصية <code>border-image</code>}}</noinclude>
الخاصية <code>border-image</code> في CSS تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية <code>border-image</code> بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية <code>[[CSS/border-style|border-style]]</code>.<syntaxhighlight lang="css">
/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل قيمة مختصرة:
* <code>[[CSS/border-image-source|border-image-source]]</code>: <code>none</code>
* <code>[[CSS/border-image-slice|border-image-slice]]</code>: <code>100%</code>
* <code>[[CSS/border-image-width|border-image-width]]</code>: <code>1</code>
* <code>[[CSS/border-image-outset|border-image-outset]]</code>: <code>0</code>
* <code>[[CSS/border-image-repeat|border-image-repeat]]</code>: <code>stretch</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر ما عدا عناصر الجدول الداخلية التي ضُبِطَت فيها الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> إلى <code>collapse</code>.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|لكل قيمة مختصرة:
* <code>[[CSS/border-image-source|border-image-source]]</code>: القيمة <code>none</code>، أو سيُحوَّل رابط URI للصورة إلى رابط مطلق.
* <code>[[CSS/border-image-slice|border-image-slice]]</code>: قيمة واحدة أو قيمتين أو ثلاث قيم أو أربع قيم تكون أطوالًا مطلقة أو نسبًا مئوية، إضافةً إلى الكلمة المحجوزة <code>fill</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>: كما حُدِّدت.

|}

== أمثلة ==
مثال عن استخدام صورة مربعة الشكل تتألف من معيّنات برتقالية اللون على الزوايا الأربع، أما الأطراف فهي معيّنات بلونٍ آخر، وبقية الصورة شفافة.
[[ملف:Border-image-example.png|بديل=صورة لتستخدم كإطار للعناصر.|بدون|تصغير|صورة لتستخدم كإطار للعناصر بأبعاد 81 بكسل عرضًا و 81 بكسل ارتفاعًا.]]
شيفرة HTML:<syntaxhighlight lang="html">
<div class="bitmap-border">The image is stretched to fill the area.</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.bitmap-border { 
  padding: 20px;
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
}
</syntaxhighlight>مثال عن استخدام تدرج لوني. شيفرة HTML:<syntaxhighlight lang="html">
<div class="gradient-border">The gradient will fill the border area.</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.gradient-border {
  padding: 20px;
  border: 20px solid;
  border-image: linear-gradient(#006699, salmon) 10;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|15.0
|15.0
|11
|15
|6
|}

== البنية العامة ==
راجع صفحات الخاصيات <code>[[CSS/border-image-source|border-image-source]]</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>.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>;
</syntaxhighlight>

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