CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows −
#rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }
The following table shows the possible values for Rounded corners as follows −
| Sr.No. | Value & Description |
|---|---|
| 1 |
border-radius
Use this element for setting four boarder radius property
|
| 2 |
border-top-left-radius
Use this element for setting the boarder of top left corner
|
| 3 |
border-top-right-radius
Use this element for setting the boarder of top right corner
|
| 4 |
border-bottom-right-radius
Use this element for setting the boarder of bottom right corner
|
| 5 |
border-bottom-left-radius
Use this element for setting the boarder of bottom left corner
|
Example
This property can have three values. The following example uses both the values −
<html> <head> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/css/images/logo.png); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p id = "rcorners1">Rounded corners!</p> <p id = "rcorners2">Rounded corners!</p> <p id = "rcorners3">Rounded corners!</p> </body> </html>
We can specify the each corner property as shown below example −
<html> <head> <style> #rcorners1 { border-radius: 15px 50px 30px 5px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners2 { border-radius: 15px 50px 30px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners3 { border-radius: 15px 50px; background: #a44170; padding: 20px; width: 100px; height: 100px; } </style> </head> <body> <p id = "rcorners1"></p> <p id = "rcorners2"></p> <p id = "rcorners3"></p> </body> <body>
No comments:
Post a Comment