बॉर्डर-रेडियस गुण

border-radius गुण बॉर्डर और बैकग्राउंड के लिए गोल कोने बनाता है। इस गुण का मान कोई भी आकार की इकाई हो सकता है। डिफॉल्ट मान: 0। यह निम्नलिखित गुणों के लिए एक शॉर्टकट है: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

सिंटैक्स

cssसिलेक्टर {
  border-radius: मान;
}

मानों की संख्या

यह गुण 1, 2, 3 या 4 मान ले सकता है, जो स्पेस से अलग करके दिए जाते हैं:

अंडाकार गोलाई

स्लैश के साथ दो मान अंडाकार गोलाई सेट करते हैं। स्लैश से पहले का मान क्षैतिज गोलाई को निर्दिष्ट करता है, और स्लैश के बाद का मान ऊर्ध्वाधर गोलाई को निर्दिष्ट करता है:

cssसिलेक्टर {
  border-radius: क्षैतिज / ऊर्ध्वाधर;
}

यदि कई कोनों के लिए गोलाई निर्धारित की जाती है, तो स्लैश से पहले सभी क्षैतिज गोलाई सूचीबद्ध की जाती हैं, और उसके बाद सभी ऊर्ध्वाधर गोलाई सूचीबद्ध की जाती हैं।

उदाहरण

आइए सभी कोनों के लिए 10px गोलाई सेट करें:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

आइए देखें कि बिंदुओं वाली बॉर्डर के लिए गोलाई कैसी दिखती है:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

आइए एक विकर्ण के कोनों के लिए 10px गोलाई सेट करें, और दूसरे विकर्ण के कोनों के लिए 40px गोलाई सेट करें:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

आइए ऊपरी बाएं कोने के लिए 10px गोलाई सेट करें, निचले दाएं कोने के लिए 30px गोलाई सेट करें, और दूसरे विकर्ण के कोनों के लिए 50px गोलाई सेट करें:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

आइए प्रत्येक कोने के लिए अलग-अलग गोलाई सेट करें:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

आइए अंडाकार गोलाई बनाएं, गोलाई के क्षैतिज भाग के लिए 20px सेट करें, और ऊर्ध्वाधर भाग के लिए 40px सेट करें:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

अब आइए सभी कोनों के लिए अलग-अलग अंडाकार गोलाई सेट करें:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

उदाहरण

यदि किसी वर्गाकार ब्लॉक के लिए गोलाई, वर्ग की भुजा के आधे के बराबर सेट की जाए, तो एक वृत्त प्राप्त होगा:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण

यदि वर्ग की भुजा से अधिक गोलाई सेट की जाए, तब भी एक वृत्त प्राप्त होगा:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण

वृत्त 50% से border-radius सेट करके भी प्राप्त किया जा सकता है (फायदा यह है कि वर्ग के आकार बदलने पर गोलाई बदलने की आवश्यकता नहीं होगी):

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण

यदि किसी आयत के लिए border-radius प्रतिशत में सेट किया जाए, तो अंडाकार गोलाई प्राप्त होगी। यदि चौड़ाई 400px में, ऊंचाई 200px में सेट है, और border-radius 10% में है, तो यह ऐसा ही है जैसे 40px/20px लिखा गया हो:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

उदाहरण

आइए एक आयत के लिए border-radius का मान 50% पर सेट करें - एक दीर्घवृत्त प्राप्त होगा:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

उदाहरण

border-radius गुण न केवल बॉर्डर के कोनों को, बल्कि बैकग्राउंड को भी गोल करता है:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

यह भी देखें