Daniel Tillett

Here is a little css to create fluid rounded borders in css (no need for JavaScript) that appears to work well in all the browsers I have been able to test. The only exception seems to be Mac IE 5.2, but that browser is a total basket case for correct CSS support anyway. You can see how I used the technique in a live site by visiting Price USA - Shop where you want.

ORB can be used to create any width border and only requires one image to create all four corners. This should really help those who are trying to keep the small image count down - some of the rounded border techniques I have seen require 9 separate images. The key is to use a single composite images and displace it by the required amount to create the final borders. The following example shows how to create a three pixel wide light grey border (#DDD) using a 10 pixel corner. So how is this done?

Image

The image needs to be created as a composite image of the four rounded images. In the example shown below the image is 10×40 pixels with the individual round corners ordered (from top to bottom): top left, top right, bottom left, bottom right. You will need to adjust the image to suit your particular border width and color, as well as the diameter of your curve. 

CSS

b.bt, b.bt b, b.bb, b.bb b {display: block; height: 10px;font-size: 1px;background:url(images/grey.gif) no-repeat;position:relative}

b.bt {top: -3px; left: -3px}

b.bt b {background-position:100% -10px; left: 6px}

b.bb {background-position:0 -20px; top:3px; left: -3px}

b.bb b {background-position:100% -30px; left: 6px}

#grey_border {border: #ddd 3px solid}

The key things to note here are the height value which needs to be set to the width value of your image and the background-position values for the image which need to be adjust by the width of your border. The values shown in the above example are for a 3 pixel wide border.

HTML

To create the box you just need add the following html inside the div with the border property.

<div id="grey_border">

<b class="bt"></b><b></b>[your content]<b class="bb"></b><b></b>

</div>

I would appreciate feedback if the technique isn’t working in your browser. So far the only browser I have found where it doesn’t work is Mac IE 5.2, but since I’m a Mac person I haven’t been able to test it extensively in all the old Windows browsers.