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 کا راؤنڈ کورنر

مطالبه:CSS بوردر پایین چپ گوشه امتیاز

مطالبه:CSS بوردر پایین راست گوشه امتیاز

مطالبه:CSS border-top-left-radius کی خاصیت

مطالبه:CSS border-top-right-radius کی خاصیت

مطالبه:CSS ڈائریکشن اپریشن

مطالبه:CSS text-orientation کا پروپرٹی

مطالبه:CSS writing-mode کا پروپرٹی