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 टेक्स्ट-ओरिएंटेशन प्रभाव

संदर्भःCSS रिटिंग-मोड प्रभाव