CSS rounded corners

CSS rounded corners

With the CSS border-radius property, you can achieve a "rounded" style for any element.
CSS border-radius property

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

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

Here are three examples:

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?? ::(insidious)

Tip: The border-radius property is actually a shorthand property for:

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

CSS border-radius - specify each corner

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

Four values - border-radius: 15px 50px 30px 5px; (used in order: upper left corner, upper right corner, lower right corner, lower left corner):

Three values - border-radius: 15px 50px 30px; (the first value is for the upper left corner, the second value is for the upper right and lower left corners, and the third one is for the lower right corner):

Two values - border-radius: 15px 50px; (the first value is for the upper left and lower right corners, the second value is for the upper right and lower left corners):

One value - border-radius: 15px; (this value is used for all four corners, 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?? ::(angry)

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?? ::(unhappy)

CSS rounded corners property