Yet ANOTHER rounded corners technique

Does the web really need ANOTHER ROUNDED CORNERS technique? Whenever I do a design with rounded corners I find myself using a different technique, and I can never find one that fits my exact needs. So as with all silver-bullet solutions what usually happens is you end up building one for yourself. This is the technique I used in Sellotape and and I find it has the right combination of flexibility, clear markup and few images to meet my needs.

The result

Here's how the technique looks in a collection of the most popular browsers thanks to Browser Shots.

See in in practice here

Why is the technique superior?

With so many methods out there, my first job is to defend why my my technique is superior:

• It only uses two images (can use one with a simpler design): One image contains the top and bottom of the div, whilst an optional second can be used to tile vertically allowing flexible height
• The CSS markup is minimal
• Just 5 classes and eleven properties produce the result
• It is flexible
• The height of the styled div is not limited by the height of your image
• It allows a wide variety of variations
• The way this technique is implemented means you are only limited by your imagination — and how long you want the page to take to load. You can have transparency and ornamentation on the header and footer as well as down the side of your div.
• It works cross-browser with NO hacks. If you are using Internet Explorer 6 and transparent PNGs you will need to use a workaround.

The Process

1. Create the image that will provide the top and bottom styles of your div

I will call this "rounded_corners.png"

This shows the parts of the image I will be using in the background for the top and bottom of my div

As with this example you can include ornamentation in your images

2.Create an image that can be repeated along the length of your div

If this is going to be one solid colour, you will not need this additional image. I will call this image "middle.png"

3. Now comes the code

You will need 5 divs for each box, I have named these: "rounded_corners" , "top", "container", "content", and "bottom". The content div is the one which will hold the text.

<div class="rounded_corners">
  <div class="top"></div>
  <div class="container">
    <div class="content">
      <!-- content -->
      <p>Place your text inside the content div</p>
      <!-- end content -->
    </div>
  </div>
  <div class="bottom"></div> 

Copy the above code into an HTML page. You may wish to rename rounded_corners to something more descriptive of the content, but you will need to change the CSS accordingly

4.Write the CSS

body {
 background: orange; /* just to demonstrate the transparency */
}
.rounded_corners {
 position:relative;
 width:350px;
 color: #FFF;
 font-family: Arial, Helvetica, sans-serif;
}
.rounded_corners .container {
 position: relative;
 background:transparent url(./images/middle.png) repeat-y 0 0;
 padding: 110px 60px 10px 50px; /* padding accommodates for decoration around box */
}
.rounded_corners .content {
 margin-top: -170px;/* this is the height of the top of the div*/
}
.rounded_corners .top {
 height: 170px;
 background:transparent url(./images/rounded_corners.png) no-repeat 0 top;
}
.rounded_corners .bottom {
 background: transparent url(./images/rounded_corners.png) no-repeat 0 -170px;/* bottom of background image */
 height: 40px;
} 

5. Customising code

If you want to change the code for your own purposes you will need to edit the following:

Set the width of "rounded_corners" to be the same width as your image

Set the height of your "top" and "bottom" div to show the portion of the image you would like to use

Position the background for the "bottom" to show the portion of the image you would like to use. Set the height of this to the height of the image minus the height of the top div e.g 210 - 170 = 40px high.

Position the background for the bottom div to be the inverse of the top divs height e.g. -170px if your top div is 170px high

Set the negative top margin of the "content" div to be the the same as height of the "top" div

Then use padding on the "container" to position your content within your image

And, that's it. You can download the source files here

If you use this technique PLEASE add a comment below with a link to the page on which it is being used.

Collections of rounded corners

Smiley Cat have a great list of over 50 different CSS and JavaScript techniques with an at-a-glance table that shows how many images each one uses and whether they are fixed or flexible. CSS Juice also has a great pictorial reference of 25 Rounded Corners Techniques with CSS, which is great for easily seeing the result each technique accomplishes. Remember, all rounded corners were not created equal.

References

• Smiley Cat’s CSS Rounded Corners ‘Roundup’ represented in a table which compares features of each
• CSS Juice: 25 Rounded Corners Techniques with CSS
• Spiffy rounded corners generator
• Semantically clean code for rounded corners with variable widths