CSS border-start-end-radius गुण

परिभाषा और उपयोग

border-start-end-radius गुण एलिमेंट के ब्लॉक दिशा के प्रारंभ (block-start) और इनलाइन दिशा के अंत (inline-end) के बीच की गोलाकार गोलाकार दूरी को परिभाषित करता है.

ध्यान दें:संबंधित CSS गुण writing-mode、text-orientation और direction ब्लॉक दिशा और इनलाइन दिशा को परिभाषित करता है. इसीलिए ये गुण इन गुणों पर भी प्रभाव डालते है: border-start-end-radius परिणाम के लिए. अंग्रेजी पृष्ठ पर, इनलाइन दिशा बाईं से दायं तक है, ब्लॉक दिशा नीचे की ओर है.

यदि border-start-end-radius गुण के दो मूल्य हैं, तो गोलाकार होगा:

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

यदि border-start-end-radius यदि गुण का एक मूल्य है, तो गोलाकार होगा:

border-start-end-radius: 50px;

CSS border-start-end-radius गुण और border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius और border-top-right-radius गुण बहुत अधिक समान है, लेकिन border-start-end-radius गुण ब्लॉक दिशा और इनलाइन दिशा पर निर्भर करता है

उदाहरण

उदाहरण 1

कुछ एलीमेंट के ब्लॉक दिशा के शुरूआती स्थान और इनलाइन दिशा के अंत के गोलाकार को जोड़ें

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

स्वयं एक प्रयोग कीजिए

उदाहरण 2: direction गुण के साथ जोड़

ब्लॉक दिशा के शुरूआती स्थान और इनलाइन दिशा के अंत के गोलाकार स्थान इस गुण से प्रभावित होते हैं direction गुण के प्रभाव

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

स्वयं एक प्रयोग कीजिए

उदाहरण 3: writing-mode गुण के साथ जोड़

ब्लॉक दिशा के शुरूआती स्थान और इनलाइन दिशा के अंत के गोलाकार स्थान इस गुण से प्रभावित होते हैं writing-mode गुण के प्रभाव

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

स्वयं एक प्रयोग कीजिए

CSS ग्रामर

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

गुण मूल्य

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

तूतिका：CSS गोलाकार

संदर्भ:CSS बॉर्डर-बोटम-बाएं-दाएं कोण गुण

संदर्भ:CSS बॉर्डर-बोटम-दाएं कोण गुण

संदर्भ:CSS border-top-left-radius गुण

संदर्भ:CSS border-top-right-radius गुण

संदर्भ:CSS direction गुण

संदर्भ:CSS टेक्स्ट-ओरिएंटेशन प्रभाव

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