Ask the CSS Guy

Mike writes:

I have a request: could you PLEASE tackle the rounded corner issue? I seem to get a request all the time to add some rounded corners to sites and I have looked at at least a dozen different solutions and was never happy. What do you recommend? How do you create rounded corners?

Let's cut to the chase - I have no new or special method for rounded corners. Also, there is no one way that I can recommend, as some methods are better suited than others based on context and need. I have no intention of doing a rundown of every method, but I'd still be happy to share how I've created rounded corners in the past.

Simplest way I know

I've been fortunate enough to work on projects that have only required rounded corners on elements with a fixed width and a solid color (no gradients). That makes it pretty easy for me - I just use a giant gif.

Gif's are relatively light-weight, even big ones if it's a solid color. For this example, I'll create one at a fixed width of 380px, and make it long - 780px. See example.

Then I'll markup my box.

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
</div>

And give it the background.

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}

Note that the width of my box is set to 340px in the CSS, because I have left and right padding of 20px, totalling the width of my image: 380px.

To get the bottom corners to show up, more markup is needed:

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

The 'boxBottom' div should be styled to fit at the bottom and stretch to the full 380px.

.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

And now I've got a rounded corner box that can stretch down pretty far - in this case, 780px.

Other methods I've used (besides... um... tables)

Another way I've made rounded corners is illustrated on this very website, in the upper right-hand corner of the content. It's using the -moz-border-radius-topright, and since it's just a trivial presentational dollop, I couldn't care less than it's mozilla-only.

In the past, I've attempted to use absolutely positioned divs with negative margins to make each corner of a bordered box, but that didn't go well with IE (not even 7), so IE didn't get rounded corners that day. When I redid the project, I used the gif method described above.

Flexible alternative

If dynamic width and height are required, I'd recommend checking out this article.