Home /code /Rounded Corners CSS /

Rounded Corners CSS

2:17 am, April 23, 2017

Original Post Date: 11:34 pm, August 19, 2014

Edit: 09:59:24 08/12/2014

So there is a massive short code for this, which seems to be supported in all modern browsers which is:

border-radius: 10px;

Thats it! You can include the below content if you want to be super compatable with old browsers, but usually if they have an old browser they can deal with it looking average.

Adding rounded corners in all browsers (that support it) which is most these days.

.rounded {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
}

A nice class for buttons is using the 2px one and some padding:

.button-rounded {
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
   -moz-border-radius: 2px 2px 2px 2px;
   -webkit-border-radius: 2px 2px 2px 2px;
   -khtml-border-radius: 2px 2px 2px 2px;
}

Example: (using inline style, but the class will work as well. )

a rounded button

See the Pen Rounded Box Div by Luke (@kruxor) on CodePen.