border property के जरिये html element में border लगायी जाती है | और उसी border के corner को गोलाई देने के लिए css border radius property का इस्तेमाल होता है |
Border Radius in CSS
border-radius property गोल border लगाने में मदद करती है | इस property से border के कोने गोल आकृति में दिखाई देतें हैं |
border-radius property 4 properties की ग्रुप है और वो हैं :
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
border-top-left-radius property
इस property से border की उपरी बायें तरफ की कोने को गोलाई दी जाती है |
border-top-right-radius property
इस property से border की उपरी दायीं तरफ की कोने को गोलाई दी जाती है |
border-bottom-left-radius property
इस property से border की निचली बायीं तरफ की कोने को गोलाई दी जाती है |
border-bottom-right-radius property
इस property से border की निचली दायीं तरफ की कोने को गोलाई दी जाती है |
उदाहरण:
<!doctype html>
<html>
<head>
<title>border-radius property</title>
<style>
#div1{
border: 2px solid red;
margin: auto;
padding: 20px;
border-top-left-radius : 10px;
border-top-right-radius : 20px;
border-bottom-right-radius : 30px;
border-bottom-left-radius : 40px;
}
</style>
</head>
<body>
<div id="div1">
<p>border radius example containing 4 values for different corners</p>
</div>
</body>
</html>
आउटपुट
border-radius property shorthand
border radius के चारों properties को अलग अलग ना लिख कर उसकी सिर्फ values को एक line में लिख कर radius सेट कर सकतें हैं | इसके लिए border-radius shorthand property का इस्तेमाल होता है |
border-radius Syntax
border-radius : [border-top-left-radius][border-top-right-radius][border-bottom-right-radius][border-bottom-left-radius]border-radius को अगर हम सिर्फ 1 value देते हैं, तो border की चारों कोने एक जैसे गोल दिखेंगे | और अगर दो value देतें हैं तो पेहली value से border के top-left, bottom-right सेट होंगी|दूसरी value से top-right और bottom-left सेट होंगी |
वैसे ही हम 4 corner के लिए 4 अलग value दे सकतें हैं | और अगर सिर्फ 3 value देते हैं तो ये एक loop की तरह पेहले 3 corner को सेट करेगी और फिर पेहली value से आखिरी corner को सेट करेगी |
उदाहरण:
<!doctype html>
<html>
<head>
<title>border-radius property</title>
<style>
p{
border: 2px solid red;
margin: 30px;
padding: 10px;
}
#p1{ border-radius: 10px;}
#p2{ border-radius: 10px 30px;}
#p3{ border-radius: 10px 30px 50px; }
#p4{ border-radius: 10px 30px 50px 70px; }
</style>
</head>
<body>
<div id="div1">
<p id="p1">border radius example containing 1 value for different corners</p>
<p id="p2">border radius example containing 2 values for different corners</p>
<p id="p3">border radius example containing 3 values for different corners</p>
<p id="p4">border radius example containing 4 values for different corners</p>
</div>
</body>
</html>
output
border radius की value को %(percentage) में भी दे सकतें हैं |
border radius से border को पूरी तरह गोल(circle) किया जा सकता है या फिर अंडाकार(oval) किया जा सकता है |
अगर border को circle बनाने है तो उस element की width और height बराबर (equal) होनी चाहिए |
उदाहरण:
<!doctype html>
<html>
<head>
<title>border-radius property</title>
<style>
p{
display:inline-block;
background-color:pink;
text-align:center;
margin: 30px;
padding: 30px;
}
#p1{
border: 2px solid red;
width: 150px;
height : 150px;
border-radius: 50%;
}
#p2{
border: 2px solid blue;
width: 100px;
height : 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">circle border-radius example</p>
<p id="p2">oval border-radius example</p>
</div>
</body>
</html>
output
