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
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.