ویژگی border-image در CSS

border-image Property

ویژگی border-image در CSS تصویری را در حاشیه و دور عنصر مورد نظر ترسیم می کند. این تصویر جایگزین حایشه (border) میشود.

این ویژگی کوتاه نویسی است برای ویژگیهای:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

نکته: بهتر اس در نظر به همراه این ویژگی، از ویژگی border-style را نیز استفاده شود، تا درصورتی که به هر دلیل تصویر مورد نظر بارگذاری نشد، مرورگر حاشیه (border) را جایگزین آن کند.

نحوه نوشتار

border-image: linear-gradient(red, blue) 15;
border-image: url("/images/border.png") 30 space;
border-image: linear-gradient(red, blue) 15 / 30px;
border-image: url("/images/border.png") 15 30 / 10px 45px / 3% round space;

ویژگی border-image میتواند یکی یا تمام مقادیر زیر را بپذیرد.

نکته: اگر مقدار border-image-source برابر با none باشد، یا تصویر به هر دلیل بارگذاری نشود، border-style به جای آن نمایش داده خواهد شد.

مقادیر

منبع تصویر حاشیه​

آدرس تصویری که برای border استفاده می شود را مشخص می کند.

برش تصویر حاشیه

ابعاد و چگونگی برش تصویر را مشخص میکند.

عرض تصویر حاشیه

عرض تصویر border را مشخص می کند.

فاصله تصویر از border

فاصله تصویر border را از لبه بیرونی عنصر مشخص می کند.

تکرار تصویر border

مشخص می کند که تصویر border باید تکرار ، گرد و یا کشیده شود.

در مثال های زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="border-image"></div>

css

.border-image {
    border-image: url(http://my-project.ir/img/border-image.png) 27 41 41 27 / 2;
    height: 50px;
    margin: 15px;
    border-width: 10px;
    border-style: solid;
}

مشاهده و ویرایش کد در حالت تمام صفحه

در مثال دیگری نحوه ایجاد گرادینت را توسط این ویژگی میبینیم:

html

<div id="gradient">این عنصر توسط گرادینتی که بوسیله border-image ایجاد شده است.</div>

css

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
  direction: rtl;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.