CSS3 Introduces a new property border-radius, to create rounded corners of a border. we can use any of following properties to create round corners.
<!doctype html>
<body style="background:aqua;">
<p style="background:orange;border-width:1em;border-style:groove;border-color:red;border-radius:50px 25px;padding:1cm;">
This is the first rounded shape
</p>
<p style="background:blue;border-width:1em;border-style:ridge;border-color:red;border-radius:50px 25px;padding:1cm;">
This is the Second rounded shape
</p>
<p style="background:green;border-width:1em;border-style:inset;border-color:red;border-top-right-radius:50px 25px;padding:1cm;">
This is the third rounded shape
</p>
<p style="background:pink;border-width:1em;border-style:outset;border-color:red;border-bottom-left-radius:50px 25px;padding:1cm;">
This is the fourth rounded shape
</p>
</body>
</html>
Here we have created four border styles using the border-radius shorthand border-top-right-radius, and border-bottom-left-radius properties. These properties are applied to the p elements of the web page.
The output of above document:
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
<!doctype html>
<body style="background:aqua;">
<p style="background:orange;border-width:1em;border-style:groove;border-color:red;border-radius:50px 25px;padding:1cm;">
This is the first rounded shape
</p>
<p style="background:blue;border-width:1em;border-style:ridge;border-color:red;border-radius:50px 25px;padding:1cm;">
This is the Second rounded shape
</p>
<p style="background:green;border-width:1em;border-style:inset;border-color:red;border-top-right-radius:50px 25px;padding:1cm;">
This is the third rounded shape
</p>
<p style="background:pink;border-width:1em;border-style:outset;border-color:red;border-bottom-left-radius:50px 25px;padding:1cm;">
This is the fourth rounded shape
</p>
</body>
</html>
Here we have created four border styles using the border-radius shorthand border-top-right-radius, and border-bottom-left-radius properties. These properties are applied to the p elements of the web page.
The output of above document:
No comments:
Post a Comment