CSS Rounded Corners
To use CSS rounded corner border-radius property is used. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Here is an example of using border-radius property:
Example:
#round_corner1 {
background-color: lightgreen;
border-radius: 25px;
width: 150px;
height: 100px;
padding: 20px;
}
#round_corner2 {
background-color: lightblue;
border: 3px solid;
border-radius: 25px;
width: 150px;
height: 100px;
padding: 20px;
}
background-color: lightgreen;
border-radius: 25px;
width: 150px;
height: 100px;
padding: 20px;
}
#round_corner2 {
background-color: lightblue;
border: 3px solid;
border-radius: 25px;
width: 150px;
height: 100px;
padding: 20px;
}
Run Example
You can also specify each corner property.
Example:
#round_corner1 {
background-color: lightgreen;
border-radius: 10px 20px 50px 5px;
width: 100px;
height: 50px;
padding: 20px;
}
#round_corner2 {
background-color: lightblue;
border: 3px solid;
border-radius: 10px 20px 50px;
width: 100px;
height: 50px;
padding: 20px;
}
#round_corner3 {
background-color: lightblue;
border: 3px solid;
border-radius: 20px 50px;
width: 100px;
height: 50px;
padding: 20px;
}
background-color: lightgreen;
border-radius: 10px 20px 50px 5px;
width: 100px;
height: 50px;
padding: 20px;
}
#round_corner2 {
background-color: lightblue;
border: 3px solid;
border-radius: 10px 20px 50px;
width: 100px;
height: 50px;
padding: 20px;
}
#round_corner3 {
background-color: lightblue;
border: 3px solid;
border-radius: 20px 50px;
width: 100px;
height: 50px;
padding: 20px;
}
Run Example
CSS rounded corners properties:
- border-radius - Used for setting all the four border-radius properties
- border-top-left-radius - Used for setting the border of top left corner
- border-top-right-radius - Used for setting the border of top right corner
- border-bottom-right-radius - Used for setting for setting the border of bottom right corner
- border-bottom-left-radius - Used for setting for setting the border of bottom left corner