/ home / code / rounded corners css /

Rounded Corners CSS

11:14 pm, February 25, 2016 636 296 1.5 @ 200 wpmrate up KruXoR source

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.

11:14 pm, February 25, 2016 636 296 source



Add Report



This is a site where i basically just post whatever i feel like at the time, it has no one particular topic but usually. Just my ideas and links and random bits of code that i find.

Follow Me..



Looking for the kruxor minecraft server mc.kruxor.com? we have migrated it to... icekraft.com if you want to play on there just connect to play.icekraft.com:25535 or mc.kruxor.com should also still work.

Favorite Links