CSS بوردر ختم شروع دایره اپریٹ

تعریف اور استعمال

border-end-start-radius اگر کسی کا وقع ہے تو اس کا تعین کیا جاتا ہے کہ عناصر کا بلاک کا آخری حصہ (block-end) اور ایندھن کا شروعاتی حصہ (inline-start) کا کورنر کا راشد دائیں کا قطر.

توجہ:مربوط سی ای اس ویژگیاں 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;

سی ای اس 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 کورنر

مطالعه:CSS بوردر پائین چپ سمت راست دایره اپریٹ

مطالعه:CSS بوردر پائین راست سمت راست دایره اپریٹ

مطالعه:CSS بوردر بالا چپ رادیئس اپریٹر

مطالعه:CSS بوردر بالا راست رادیئس اپریٹر

مطالعه:CSS دائرہ پرزواری

مطالعه:CSS text-orientation کا پیراگرفت

مطالعه:CSS writing-mode کا پیراگرفت