Rounded Corners on DIVs

Filed in: CSS

The old way: With <table>

Back in the old days when people used tables like they were going out of fashion, rounded corners were easy to create. You take a picture of a circle, chop it into some smaller pieces:

Then make a 3x3 table with these images in each corner:

	this is just an example block of text to make this table look bigger

This method was great for a simple bit of a page, but imagine how complicated this could get with a table nested within a table nested within a table nested within... (I think you get the idea).

A new way: with <div> & <img>

Anyway, back to the point of this page: How do you do it with CSS?

There are 2 options. The first one is similar to the table version and involves images. Simply set up a div with code like this (replacing the background-color with a colour of your choice):

div.rounded-corner-top {
  background-image: url("top-right.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-color: #008080;
  color: #FFFFFF;
}

Then in the HTML document add the left corner:

<div class="rounded-corner-top">
  <img src="top-left.png" style="display: block;" />
</div>

Hopefully, you can make the leap in your mind to setting up the bottom part of the rounded corner div. It is important to note that with this method you can't use transparency on your images as the background-color will show through giving you a solid block of colour instead of the fancy round corners. Here is an example of our finished product:

Another new way: with <div> only

The second method of creating round corners on your div sections is to use a number (I use 3, 4 or 5 on this site) of small divs with varying margins to build the round corner manually.

Although it does create an extra bit of markup in your pages, it does cut out the need for image files reducing the overall size of a page quite considerably.

Right, let's get to it. First off, here is an enlarged image of how we want to create the rounded corner:

This image shows our 4 div elements at the top and the content below. I borrowed the layout of this corner from CSS Play. To make this work perfectly, we need a container div to hold the 4 extra divs. Here's the CSS needed to create this corner:

div.rounded-corner-container {
  background-color: #FFFFFF;
  color:  #008080;
}

div.rounded-corner-1, div.rounded-corner-2,
div.rounded-corner-3, div.rounded-corner-4 {
  background-color: #008080;
  color: #FFFFFF;
  height: 1px;
  font-size: 1px;
  overflow: hidden;
}

div.rounded-corner-1 {
  margin: 0 5px;
}

div.rounded-corner-2 {
  margin: 0 3px;
}

div.rounded-corner-3 {
  margin: 0 2px;
}

div.rounded-corner-4 {
  margin: 0 1px;
  height: 2px;
}

Nothing particularly ground-breaking in that block, but it's worth noting that font-size: 1px and overflow: hidden - This makes sure the div doesn't expand vertically to include any whitespace within it (and there needs to be some or IE might not display the div).

Next up, the HTML code:

<div class="rounded-corner-container">
  <div class="rounded-corner-1"> </div>
  <div class="rounded-corner-2"> </div>
  <div class="rounded-corner-3"> </div>
  <div class="rounded-corner-4"> </div>
</div>

Again, nothing extraordinary there. The containing div is needed when the margin is applied to the nested divs to make sure they're all lining themselves up against the same thing.

The bottom end of this method is very simple - just repeat the top half reversing the order of the nested divs, like so:

<div class="rounded-corner-container">
  <div class="rounded-corner-4"> </div>
  <div class="rounded-corner-3"> </div>
  <div class="rounded-corner-2"> </div>
  <div class="rounded-corner-1"> </div>
</div>

Giving us a finished product not too dissimilar to this:

Conclusion

My personal favourite is the last method because I'm a programmer, not a graphic designer, and as such I prefer to write a little bit of code to accomplish something rather than create a bunch of images and try to get them all to fit. Just creating the examples on this page were enough to confirm my preference.

Obviously, the first approach using tables is BAD and should not be used ever (although lots of sites do). The second approach is OK to use but it does add extra markup to the middle of blocks where you might like to add text. The third approach is GOOD as the only extra markup needed is above and below blocks of text so it doesn't get in the way as much.