CSS Rounded Corners
Posted: Fri Oct 27, 2023 8:24 am
CSS Rounded Corners
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 corners 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.
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:
Give the div element rounded corners.
<style>
div {
background: red;
: 10px;
}
</style>
<body>
<div>This is a div element. It has some text.</div>
</body>
Submit Answer »
Start the Exercise
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
★
+1
Reference: https://www.w3schools.com/css/css3_borders.asp
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 corners 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.
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:
Give the div element rounded corners.
<style>
div {
background: red;
: 10px;
}
</style>
<body>
<div>This is a div element. It has some text.</div>
</body>
Submit Answer »
Start the Exercise
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
★
+1
Reference: https://www.w3schools.com/css/css3_borders.asp