ORB | Fluid CSS One Image Round Borders

September 11th, 2007

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. 

Grey rounded border composite box image
 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.   

Sphere: Related Content

Posted by Daniel Filed in css

6 Responses to “ORB | Fluid CSS One Image Round Borders”

  1. Nathan Says:
    October 14th, 2007 at 12:36 pm

    Hi Daniel, I tried your rounded corners css and it works great, except I’m finding one issue in IE. Check out the link in both browsers: h**p://lathamhybrids.spinutech.com/

    The area w/ rounded corners is the blue nav bar. You’ll notice that there is some extra space being added in IE, while Firefox looks perfect.

    My stylesheet is at:
    h**p://lathamhybrids.spinutech.com/styles.css

    And the image is at:
    h**p://lathamhybrids.spinutech.com/images/corners_blue.gif

  2. Daniel Says:
    October 14th, 2007 at 6:32 pm

    Hi Nathan

    I see that you are using it to create round box corners rather than rounded borders. The code for doing this is a little different. I would make your image a little larger and try to anti-aliases the corners to make the rounded box smoother.

    I suspect that the problem you are having with IE is due to the margin box problem that IE has. I am using the technique on another site and it seems to be fine in IE 6 although I haven’t tested it with any version older than this other than Mac IE5.2 where it is totally broken :-)

    I am going to look into what hacks need to be done to get this to work in older IE.

    Daniel

  3. Dan Says:
    November 18th, 2007 at 5:37 pm

    Hi Daniel.

    I love this method. It works great!

    One thing I’d appreciate, is a layered PSD file of your corner file, as it’d be much easier to manipulate and create new colors, etc. Would you be able to publish a source file?

  4. Daniel Says:
    November 20th, 2007 at 7:15 pm

    Hi Dan

    I am glad you find this method useful. I didn’t actually use a layered PSD file to create the corner file. Basically all I did is draw the rounded box using Fireworks then cut and pasted one of the corners four times. I then just rotated each corner image to get the final image. Not the most elegant approach, but it was pretty quick :)

    Daniel

  5. eysha Says:
    November 23rd, 2007 at 2:02 am

    can i put padding on that?..

  6. Daniel Says:
    November 23rd, 2007 at 6:13 pm

    Hi Eysha

    Padding where?

Leave a Reply