Four Corners (aka Top and Tail)

In this method, the background acts as our rounded element, and we place images in elements within the container. In the simplest form, this can be just a top div, bottom div and a bit for your content. The problem with this is that it’s fixed width, which is where the 4 corners comes in allowing the container to resize. This is an acceptable, if HTML heavy way of tackling the problem as you often need more than one image to satisfy the numerous corners. Take a look at these rounded CSS corners.

Four Corners – One Image

This is a more complex CSS fix for the problem, but it’s not so good with transparent images where you need a PNG/transparency. In this instance, fluid rounded corners is a good way of acheiveing the effect and can look quite cool, despite some extra HTML. However, it’s not much use in IE6 as IE’s background positioning is pants so you need to defer to transparent GIFs, which is not much use where you have drop shadows.

Rounded CSS Corners that work in IE as well!

A little while ago I found a link to a site by Drew Diller. Drew had noticed that IE’s VML will allow you to draw a border around an HTML element. This means that you can use your nice CSS 2.1 and get rounded corners in IE. It also makes sure that it only draw the borders in IE, leaving you to implement your own rounded corners in CSS 2.1 compatible browsers such as Firefox and Safari. For instance, you could do the following:

In your CSS you can put the following:

#round {
border: 1px solid #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Which will give you a nice rounded box in Firefox and Safari.

You can then use Drew Diller’s script to put them in for IE. Simple!

Drawbacks

Currently, the script doesn’t support HTML form elements (it’s difficult to append HTML to a form element). However, Drew tells me that he’s working on a fix at the moment, which will be greatly received.