Like many other designers, I go through certain “phases” in which I’m particularly enamoured with a certain font, a certain style- even a certain color. Right now, one of the things I’m lovin’ is CSS3’s Border-Radius. Before I started using it, I applied techniques such Spiffy Corners and Curvy Corners, which- while very good solutions- were a little too bulky for me. Border-Radius, you see, is simplicity itself:

.box1 {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;}

will give you this:

Now let’s have some fun:

.box2 {
background-color: #ccff66;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 0px;
padding: 10px;}

produces:

.box3 {
background-color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px dashed #999;
padding: 10px;}

produces:

and

.box4 {
background-color: #ffcc66;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border: 1px solid #ccc;
padding: 10px;}

produces:

From these examples, you can get an idea of the possibilities of border-radius. Throw in some box-shadow effects, maybe even a webkit-transform… the key is to play with it.

Now, it’s important to know that Internet Explorer does not support this. For rounded corners in IE, I recommend these methods: DD_roundies (a javascript library), or Curved Corner, which uses a CSS hack.

Do you use border-radius?