CSS Rounded Corners

CSS Rounded Corners

Through CSS border-radius Properties can realize the 'rounded corner' style of any element.

CSS border-radius Property

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

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

Here are three examples:

1. Rounding corners of elements with specified background colors:

Rounded corners!

2. Rounding corners of elements with borders:

Rounded corners!

3. Rounding corners of 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 respectively for: top left corner, top right corner, bottom right corner, bottom left corner):

Three values - border-radius: 15px 50px 30px;(The first value is used for the top left corner, the second value is used 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 is used for the top right and bottom left corners):

One value - border-radius: 15px;(This value is used for all four corners, and the rounding 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 rounding 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.