border-image-width Property
ویژگی border-image-width در CSS عرض تصویر حاشیه (border) عنصر را تعیین می کند.
نحوه نوشتار
/* مقدار کلیدواژه */ border-image-width: auto; /* مقدار (طول) */ border-image-width: 1rem; /* مقدار (درصد) */ border-image-width: 25%; /* مقدار (عدد) */ border-image-width: 3; /* افقی | عمودی */ border-image-width: 2em 3em; /* پایین | افقی | بالا */ border-image-width: 5% 15% 10%; /* راست | پایین | راست | بالا */ border-image-width: 5% 2em 10% auto;
ویژگی border-image-width میتواند یک تا چهار مقدار را بپذیرد.
- اگر یک مقدار مشخص شود، برای هر چهار طرف اعمال می شود.
- اگر دو مقدار مشخص شود، اولی برای حاشیه های بالا و پایین و دومی برای حاشیه های چپ و راست اعمال خواهند شد.
- اگر سه مقدار مشخص شود، اولی برای حاشیه بالا، دومی برای چپ و راست و دومی اعمال شد.
- اگر چهار مقدار مشخص شود، به ترتیب برای بالا، راست، پایین و چپ اعمال خواهد شد.
مقادیر
طول
عرض حاشیه مقدار طول را مشخص می کند. که میتواند بصورت پیکسل یا درصد باشد.
عدد
مضرب border-width های متناظر را مشخص می کند.مقدار پیشفرض آن 1 میباشد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
تصویر استفاده شده در این مثال به عنوان تصویر حاشیه 
میباشد.
html
<div>
این یک متن نمونه است.
</div>
css
div {
border: 10px solid;
border-image: url("http://my-project.ir/img/border.png") 30 space;
border-image-width: 15px;
padding: 20px;
dorection: rtl;
}
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.
