The CSS border-radius property is used to create rounded corners for elements.
CSS border-radius Property
The border-radius property defines the radius of an element's corners.
This property can be applied to all elements with a background-color , a border , or a background-image .
Here are three examples
- Rounded corners for an element with a background color:
Rounded corners!
- Rounded corners for an element with a border:
Rounded corners!
- Rounded corners for an element with a background image:
Rounded corners!
Example
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background-image: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}Live preview
Tip
The border-radius property is actually a shorthand property for the border-top-left-radius , border-top-right-radius , border-bottom-right-radius and border-bottom-left-radius properties.
CSS border-radius - Specify Each Corner
The border-radius property can have from one to four values. Here are the rules:
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:
Example
#div1 {
border-radius: 15px 50px 30px 5px; /* four values */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px; /* three values */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px; /* two values */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px; /* one value */
background: #04AA6D;
width: 200px;
height: 150px;
}Live preview
CSS Elliptical and Circular Shapes
To create elliptical corners, you must specify two values for each radius, separated by a slash /. The first value defines the horizontal radius, and the second value defines the vertical radius.
To create a oval shape (for a rectangular element), or to create a circular shape (for a square element) set border-radius to 50%.
Example
#div1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px / 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
}Live preview
CSS Rounded Corners Properties
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |