CSS Rounded Corners
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
CSS Rounded Corners
❮ Previous
Next ❯
CSS Rounded Corners
With the CSS border-radius property, you can give any element "rounded corners".
CSS border-radius Property
The CSS border-radius property defines the radius of an
element's corners.
Tip: This property allows you to add rounded borders to
elements!
Here are three examples:
1. Rounded corners for an element with a specified background color:
Rounded corners!
2. Rounded corners for an element with a border:
Rounded corners!
3. Rounded corners for an element with a background image:
Rounded corners!
Here is the code:
Example
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} Try it Yourself »
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.
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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:
Here is the code:
Example
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Try it Yourself »
You could also create elliptical corners:
Example
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Try it Yourself »
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
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 |
❮ Previous
Next ❯