Noscope

Rounded Corners In CSS, The Straight And Logical No Bullshit Way

August 8th, 2008 code, css, webdesign

As if some universal law is at play, somehow, rounded corners (nearly) always manage to fix broken webdesigns. The problem is, they’re a bitch to make in HTML and CSS. Having been through a number of ways to do rounded corners, I’ve found myself settling on one method, which, even if it isn’t completely search engine friendly¹, it’s really quick and easy to make. The results are alright as well:

We only use a single image file for all four rounded corners. Thusly:

The above is 22×22px. So in order for this to become four corners, we’ll crop it (using CSS) to an 11×11px size. Because we don’t want to use JavaScript or oodles of extra CSS, we accept the inevitable. Our rounded corner boxes need a little extra markup.

HTML Code

<div class="mybox">
  <div class="ctl"></div><div class="ctr"></div>

    <p>My content here</p>

  <div class="cbl"></div><div class="cbr"></div>
</div>

Fortunately, the benefits are immediately visible in the shorter than usual rounded corners CSS.

CSS Code

/* Box */
.mybox {
  background-color: #99BCDE;
  position: relative;
  padding: 20px;
  }

/* Corners */
div.ctl, div.ctr, div.cbl, div.cbr { /* All corners */
  height: 11px;
  width: 11px;
  position: absolute;
  }  
div.ctl, div.ctr { /* Top corners */
  top: 0;
  }
div.cbl, div.cbr { /* Bottom corners */
  bottom: 0;
  }
div.ctl { /* Top left corner */
  background: url(/media/corners_darkblue.gif) no-repeat left top;
  left: 0;
  }
div.ctr { /* Top right corner */
  background: url(/media/corners_darkblue.gif) no-repeat right top;
  right: 0;
  }
div.cbl { /* Bottom left corner */
  background: url(/media/corners_darkblue.gif) no-repeat left bottom;
  left: 0;
  }
div.cbr { /* Bottom right corner */
  background: url(/media/corners_darkblue.gif) no-repeat right bottom;
  right: 0;
  }

What happens here is that the the corner image file is attached to the superfluous classes ctl, ctr, cbl, cbr, (ctl = “Corner, Top Left” and so on). The full corner image is then cropped down to show only the wanted corner. Finally, using absolute positioning, the four corners are placed in the top left, top right, bottom left and bottom right respectively. Using absolute positioning, cleverly, there’s no need to worry about margin, padding, floats, and so on. A breeze, in other words. A CSS breeze.

There’s one downside; the method won’t work if you need a background image or tile, as each corner has a burnt in matte fill. If you need rounded corners and a background image, and if you don’t care about Internet Explorer or Opera, you could just round the corners in CSS3:

.mybox {
  -moz-border-radius: 5px;   /* Firefox */
  -khtml-border-radius: 5px;   /* Konquerer */
  -webkit-border-radius: 5px;   /* Webkit / Safari */
  border-radius: 5px;    /* All other CSS3 capable browsers */
  }

Unfortunately, most people use browsers without those delicious CSS3 capabilities. So unless you want to point at them and laugh, you’ll probably have to go through the motions. The above mentioned motions, I’ve found, have been the least tiresome.

1. Search engine friendly would use only semantic markup. No empty tags.   ↑