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

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

border-end-start-radius این خاصیت برای تعریف نیم‌قطر نوک (block-end) و ابتدای جهت درونی (inline-start) استفاده می‌شود.

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

اگر border-end-start-radius اگر دو خاصیت داشته باشد، نوک یک بیضی خواهد بود:

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

اگر border-end-start-radius اگر یک خاصیت داشته باشد، نوک دایره‌ای خواهد بود:

border-end-start-radius: 50px;

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

مثال

مثال 1

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

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

آزمایش کنید

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

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

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

آزمایش کنید

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

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

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

آزمایش کنید

جمله‌بندی CSS

border-end-start-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