ویژگی border-end-end-radius CSS

تعریف و استفاده

border-end-end-radius ویژگی برای تعریف رادیوس گوشه‌های انتهای بلوک (block-end) و انتهای درون خط (inline-end) استفاده می‌شود.

توجه داشته باشید:ویژگی‌های CSS مرتبط writing-mode،text-orientation و direction تعریف جهت بلوک و جهت درون خط. به همین دلیل این ویژگی‌ها نیز بر border-end-end-radius نتیجه ویژگی. برای صفحات انگلیسی، جهت درون خط از چپ به راست و جهت بلوک به پایین است.

اگر border-end-end-radius ویژگی‌ای که دو مقدار دارد، گوشه‌های گرد یک بیضی خواهد بود:

border-end-end-radius: 50px 100px;

اگر border-end-end-radius ویژگی‌ای که یک مقدار دارد، رادیوس گوشه‌های گرد خواهد بود:

border-end-end-radius: 50px;

CSS border-end-end-radius ویژگی‌ها با border-bottom-left-radius،border-bottom-right-radius،border-top-left-radius و border-top-right-radius بسیار مشابه هستند، اما border-end-end-radius ویژگی‌ها وابسته به مسیر بلوک و مسیر درون‌محلی هستند.

مثال

مثال 1

برای اضافه کردن قطرات گرد انتهای مسیر بلوک و انتهای مسیر درون‌محلی به برخی از عناصر:

#example1 {
  background-color: lightblue;
  border-end-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  writing-mode: vertical-rl;
} 

آزمایش کنید

مثال 2: ترکیب ویژگی direction

موقعیت قطرات گرد انتهای مسیر بلوک و انتهای مسیر درون‌محلی تحت تأثیر: direction تأثیر ویژگی:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-end-radius: 25px;
}

آزمایش کنید

مثال 3: ترکیب ویژگی writing-mode

موقعیت قطرات گرد انتهای مسیر بلوک و انتهای مسیر درون‌محلی تحت تأثیر: writing-mode تأثیر ویژگی:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-end-radius: 25px;
}

آزمایش کنید

نوع دستور زبان CSS

border-end-end-radius: 0|length|initial|inherit;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

صفحات مرتبط

آموزش:کругک CSS

منبع:ویژگی border-bottom-left-radius CSS

منبع:ویژگی border-bottom-right-radius CSS

منبع:ویژگی border-top-left-radius CSS

منبع:ویژگی border-top-right-radius CSS

منبع:ویژگی direction CSS

منبع:ویژگی text-orientation CSS

منبع:ویژگی writing-mode CSS