CSS Rounded Corners

CSS Rounded Corners

Through CSS border-radius Properties can achieve the 'rounded corner' style for any element.

CSS border-radius Property

CSS border-radius The property defines the radius of the element's corners.

Tip:You can use this property to add rounded corners to elements!

Here are three examples:

1. Rounded corners for elements with specified background colors:

Rounded corners!

2. Rounded corners for elements with borders:

Rounded corners!

3. Rounded corners for elements with background images:

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:border-radius The property is actually a shorthand for the following properties:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - Specify each corner

border-radius The property can accept one to four values. The rules are as follows:

Four values - border-radius: 15px 50px 30px 5px;(Used in order: top-left, top-right, bottom-right, bottom-left):

Three values - border-radius: 15px 50px 30px;(The first value is used for the top-left corner, the second value for the top-right and bottom-left corners, and the third for the bottom-right corner):

Two values - border-radius: 15px 50px;(The first value is used for the top-left and bottom-right corners, the second value for the top-right and bottom-left corners):

One value - border-radius: 15px;(This value is used for all four corners, and the rounded corners are the same):

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 can 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

CSS rounded corner property

Property Description
border-radius This shorthand property is used to set all four border-*-*-radius properties.
border-top-left-radius Define the shape of the top left border.
border-top-right-radius Define the shape of the top right border.
border-bottom-right-radius Define the shape of the bottom right border.
border-bottom-left-radius Define the shape of the bottom left border.