Create rounded corners in CSS3

Page 1 / 1

To create rounded corners, you must use the "border-radius" CSS3 property called.
For better compatibility with different browsers, we recommend using the following prefixes :

  • -o- for Opera
  • -moz- for Gecko (Mozilla)
  • -webkit- for Webkit (Chrome, Safari, Android...)
  • -ms- for Microsoft (Internet Explorer)

 

In the example below, the block with a class "identical_rounded_corners" aura all its rounded corners with a radius of "20px".

CSS

.identical_rounded_corners{
  -o-border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
}
 

 

To use different rays, you must specify them in this order :

  • Upper left corner
  • Upper right corner
  • Lower right corner
  • Lower left corner

This will give this example :

CSS

.different_rounded_corners{
  -o-border-radius: 5px 10px 15px 20px;
  -moz-border-radius: 5px 10px 15px 20px;
  -webkit-border-radius: 5px 10px 15px 20px;
  -ms-border-radius: 5px 10px 15px 20px;
  border-radius: 5px 10px 15px 20px;
}
 

 

Note : Tested in Firefox, Google Chrome, IE and Opera