border-inline-end در CSS

ویژگی border-inline-end
در CSS برای تعریف استایل حاشیه در انتهای منطقی خطی (inline) یک عنصر استفاده میشود. این “انتهای منطقی خطی” به حالت نوشتار، جهت متن (ltr
یا rtl
) و حالت نوشتاری عنصر بستگی دارد.
سینتکس:
border-inline-end: [ border-width || border-style || border-color ];
ویژگیهای جزئی
میتوان آن را به ویژگیهای زیر تفکیک کرد:
border-inline-end-width
border-inline-end-style
border-inline-end-color
مقدار پیشفرض
مقدار پیشفرض به صورت زیر است:
border-inline-end: medium none currentColor;
حالتهای نوشتاری
این ویژگی تحت تأثیر موارد زیر است:
- حالتهای نوشتاری (مانند
horizontal-tb
،vertical-rl
و غیره). - جهت متن (
ltr
یاrtl
).
برای مثال:
- در حالت نوشتاری چپ به راست (
ltr
)،border-inline-end
معادلborder-right
است. - در حالت نوشتاری راست به چپ (
rtl
)،border-inline-end
معادلborder-left
است.
مثال:
div {
writing-mode: horizontal-tb;
border-inline-end: 5px solid blue;
}
کاربرد عملی
ویژگی border-inline-end
بهویژه برای طراحیهای واکنشگرا و بینالمللیسازی مفید است. این ویژگی باعث میشود طراحی بدون نیاز به تغییر دستی border-left
یا border-right
با زبانها و جهتهای نوشتاری مختلف تطبیق پیدا کند.
پشتیبانی مرورگرها
ویژگی border-inline-end
توسط اکثر مرورگرهای مدرن پشتیبانی میشود، از جمله:
- Chrome
- Firefox
- Edge
- Safari (نسخههای جدید)
برای مرورگرهای قدیمیتر یا پشتیبانی گستردهتر، ممکن است نیاز به استفاده از ویژگیهای فیزیکی مانند border-left
و border-right
داشته باشید.
دیدگاهتان را بنویسید