CSS Rounded and Elliptical 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: #0054ff;
color: #fff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(blue.jpeg);
color: #fff;
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

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: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px 50px 30px;
background: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 15px 50px;
background: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners4 {
border-radius: 15px;
background: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

You could also create elliptical corners:

Elliptical corners are added using border-radius with two params (param1/param2).

param1 is the horizontal radius of ellipse.

param2 is the vertical radius of ellipse.

We can also apply different elliptical corners, using border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

Apply border-radius to 50%, to make the elliptical corners, with same horizontal and vertical radius i.e. circle. It will make the element circle, when the padding applied is same from all sides.

Example

#rcorners1 {
border-radius: 50px / 15px;
background: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px / 50px;
background: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #0054ff;
padding: 20px;
width: 200px;
height: 150px;
}

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