CSS border-start-start-radius गुण

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

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

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

यदि border-start-start-radius गुण के दो मूल्य हैं, तो गोलाकार खुर्ची एक अभिमत होगा:

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

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

border-start-start-radius: 50px;

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

उदाहरण

उदाहरण 1

कुछ एलिमेंट के क्षेत्र दिशा और इनलाइन दिशा के प्रारंभ में की गोलाकार जोड़ें:

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

स्वयं का प्रयोग करें

उदाहरण 2: direction गुण के साथ संयोजन

क्षेत्र दिशा और इनलाइन दिशा के प्रारंभ में की गोलाकार स्थिति प्रभावित करता है direction गुण के प्रभाव:

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

स्वयं का प्रयोग करें

उदाहरण 3: writing-mode गुण के साथ संयोजन

क्षेत्र दिशा और इनलाइन दिशा के प्रारंभ में की गोलाकार स्थिति प्रभावित करता है writing-mode गुण के प्रभाव:

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

स्वयं का प्रयोग करें

CSS व्याकरण

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

गुण मूल्य

तकनीकी विवरण

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

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

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

ट्यूटोरियल:CSS गोलाकार

संदर्भ:CSS बॉर्डर-नीचे-बाएं-गोलाकार गुण

संदर्भ:CSS बॉर्डर-नीचे-दाएं-गोलाकार गुण

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

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

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

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

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