CSS3 मे Border Radius Property का उपयोग Rounded Corner को बनाने के लिए किया जा सकता है. यह Property Outer Border Corner के Shape को आमतौर पर Define करती है.
CSS3 से पहले कटा हुआ images का उपयोग Rounded Corners को बनाने के लिए किया जाता है जो कि Troublesome था.
लेकिन अब आप CSS3 मे Border Radius का उपयोग कर के किसी भी Element का "rounded corners" दे सकते है.
#rcorners3 {
border-radius: 60px/15px;
background: #000;
padding: 20px;
width: 200px;
height: 150px;
}
| Values | Description |
|---|---|
| border-radius | Boarder Radius Property की स्थापना के लिए इस Element का उपयोग करते है. |
| border-top-left-radius | Top Left Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
| border-top-right-radius | Top Right Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
| border-bottom-right-radius | Bottom Right Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
| border-bottom-left-radius | Bottom Left Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Rounded Corners</title>
<style type="text/css">
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #d61515;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #d61515;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #d61515;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
</html>