Monthly Archives: November 2007

Mike asks the CSS Guy for recommendations on rounded corners

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.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


With a few minor tweaks, you should be able to apply the box bottom to the paragraph instead of an empty div. Functionally the same idea, but just that much less markup.

Job Opportunity in Memphis, Tennessee

work at Hilton Hotels, and for a big project, we’re needing help for front-end web development.

We need someone who can write HTML, CSS, and JavaScript. The well-structured, valid, semantic, accessible, progressive enhancement/graceful degradation kind of stuff.

It’s a plus, but not a requirement, if you’re familiar with jQuery and have worked on gargantuan international travel web sites.

It’s full-time work, but a temporary position, lasting a minimum of six months. The candidate must play well with others, and must be able to commute to Memphis, TN.

Send a resumes, links to some of your work (descriptions would be helpful), and hourly rates to askthecssguy+hiltonjob@gmail.com.

Update Nov 7, 2007: time frame added.

Update Nov 23, 2007: The position has been filled.