Creating rounded corners with PNGs and CSS

With all the hype about Web 2.0, many sites have started sporting rounded corners. There are several ways of achieving this, depending on what is required, but the ultimate requirement is for rounding a box of any size with the minimum of graphics and extra code. I am going to demonstrate a method that I have developed (though I am sure others may well have done something similar, if not identical) that uses a few small PNG images and some handy CSS.

First, an explanation of the intended purposes for this method. While being completely flexible in terms of size, there are some limitations in terms of visual usage. This example assumes a plain background colour of some pre-defined colour, and that it is only the corners themselves that are needed - no shadows or special box edges (that will be covered in a later tutorial). This method also requires that no CSS border is specified, as this will conflict with the corner effect. The internal area of the box, however, can be any colour or texture.

The concept behind this technique is to mask the corners with the background colour. The following images show how to create these corner images in Photoshop (other graphics programs will be similar).

1. Create a canvas 32x32 pixels in size with a white layer.
2. Using the circle select tool create a selection from one corner to the one diagonally opposite, effectively creating a circle of diameter 32 pixels (i.e. radius 16 pixels).
3. Hit the delete key to remove the white from inside the selection, leaving only the corners.
4. Reduce the canvas size to 16x16 pixels, making sure to anchor to a corner. You will be left with a mask image for a rounded corner.
5. Rotate the canvas by 90 degrees to get the other three corners, saving each as a 24-bit .PNG image.

Corners 1 Corners 2 Corners 3 Corners 4 Corners 5

1: A basic box

Let us start with a standard, unaltered DIV box:

  1. <div id="box">
  2. <h2>Box title goes here</h2>
  3. <p>Here is some text.  Hooray!  All hail the mighty CSS, king of the Internet!</p>
  4. </div>

And the following CSS:

  1. #box { background: #a0c0ff; padding: 10px; margin: 40px; width: 200px; }
  2. #box h2 { font-size: 1.3em; text-align: center; margin: 0; }

[Rounded corners example 1]

2: The top corners

By creating DIVs for each corner and positioning them absolutely we can force them to sit in each respective corner. For this to work, remember to make sure the containing object (in this case #box) is set to position: relative. Make sure you have adequate padding to the box so that the text and the corner graphics do not overlap.

  1. <div id="box">
  2. <div class="corner cTopLeft"></div>
  3. <div class="corner cTopRight"></div>
  4. <h2>Box title goes here</h2>
  5. <p>Here is some text.  Hooray!  All hail the mighty CSS, king of the Internet!</p>
  6. </div>

And the CSS:

  1. #box { background: #a0c0ff; padding: 10px; margin: 40px; width: 200px; position: relative; }
  2. #box h2 { font-size: 1.3em; text-align: center; margin: 0; }
  3. .corner { position: absolute; background-repeat: no-repeat; width: 16px; height: 16px; }
  4. .cTopLeft { top: 0; left: 0; background-image: url(cornerTL.png); }
  5. .cTopRight { top: 0; right: 0; background-image: url(cornerTR.png); }

[Rounded corners example 2]

It is worth noting the use of multiple classes for the corners. Since they all share some common attributes, we put them in a separate class, and use individual corner classes for those attributes that are specific to that corner, i.e. the image and its placement. This just makes for tidier CSS.

3: The bottom corners

The bottom corners are done in exactly the same way as the top, so no surprises here.

  1. <div id="box">
  2. <div class="corner cTopLeft"></div>
  3. <div class="corner cTopRight"></div>
  4. <h2>Box title goes here</h2>
  5. <p>Here is some text.  Hooray!  All hail the mighty CSS, king of the Internet!</p>
  6. <div class="corner cBottomLeft"></div>
  7. <div class="corner cBottomRight"></div>
  8. </div>

And the CSS:

  1. #box { background: #a0c0ff; padding: 10px; margin: 40px; width: 200px; position: relative; }
  2. #box h2 { font-size: 1.3em; text-align: center; margin: 0; }
  3. .corner { position: absolute; background-repeat: no-repeat; width: 16px; height: 16px; }
  4. .cTopLeft { top: 0; left: 0; background-image: url(cornerTL.png); }
  5. .cTopRight { top: 0; right: 0; background-image: url(cornerTR.png); }
  6. .cBottomLeft { bottom: 0; left: 0; background-image: url(cornerBL.png); }
  7. .cBottomRight { bottom: 0; right: 0; background-image: url(cornerBR.png); }

[Rounded corners example 3]

4: Backwards compatibility

We have been using 24-bit .PNG images here, which allows us to use alpha channels for smooth corners. However, these are not handled well in Internet Explorer 6 and below, so for backwards compatibility for old IE browsers we need to add in some browser-specific hacks to ensure the corners are dealt with appropriately. We have two options: either don’t show the corners at all (which wouldn’t break the layout, but would be a shame design-wise), or use .GIF images instead and put up with jagged corners. Rather than use CSS-based hacks, which are generally quite messy and unsightly, I would recommend using a conditional section in your HTML header:

  1. <html>
  2. <head>
  3. <title>A page with a box</title>
  4. <style>
  5. #box { background: #a0c0ff; padding: 10px; margin: 40px; width: 200px; position: relative; }
  6. #box h2 { font-size: 1.3em; text-align: center; margin: 0; }
  7. .corner { position: absolute; background-repeat: no-repeat; width: 16px; height: 16px; }
  8. .cTopLeft { top: 0; left: 0; background-image: url(cornerTL.png); }
  9. .cTopRight { top: 0; right: 0; background-image: url(cornerTR.png); }
  10. .cBottomLeft { bottom: 0; left: 0; background-image: url(cornerBL.png); }
  11. .cBottomRight { bottom: 0; right: 0; background-image: url(cornerBR.png); }
  12. </style>
  13. <!--[If lte IE 6]>
  14. <style>
  15. .cTopLeft { background-image: url(cornerTL.gif); }
  16. .cTopRight { background-image: url(cornerTR.gif); }
  17. .cBottomLeft { background-image: url(cornerBL.gif); }
  18. .cBottomRight { background-image: url(cornerBR.gif); }
  19. /* .corner { display: none; } */ /* ALTERNATIVE SOLUTION */
  20. </style>
  21. <![endif]-->
  22. </head>
  23. <body>
  24. <div id="box">
  25. <div class="corner cTopLeft"></div>
  26. <div class="corner cTopRight"></div>
  27. <h2>Box title goes here</h2>
  28. <p>Here is some text.  Hooray!  All hail the mighty CSS, king of the Internet!</p>
  29. <div class="corner cBottomLeft"></div>
  30. <div class="corner cBottomRight"></div>
  31. </div>
  32. </body>
  33. </html>

[Rounded corners example 4]

If you would like to use the graphics I have used above, feel free to download this zip file containing everything you'll need.

I hope that is enough to get you started. I shall post a further article here for more complex rounded corners with custom borders at a later date.

Matthew