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.
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.
Edit: Wordpress is messing up the html code at the moment – must be some sort of bug. The code quoted above is corrected now.
October 8th, 2008 at 8:47 am
Wouldn’t that be nice. Doesn’t work for me though in Firefox 3.0.1. Does however in IE6?
October 8th, 2008 at 8:54 am
Well, wouldn’t just be nice: it IS nice! You can disregard/remove my comment earlier; made a css error. Oops. Thanks for this nice solution!
October 27th, 2008 at 9:34 am
I have been looking around all kinds of css solutions for rounded corners, yours is by far the smallest amount of code and works great, thanks for sharing this.
November 24th, 2008 at 2:44 am
The selectors for the right corners are incorrect for the given HTML. Since follows b.bt and b.bb (and is not contained within them), the correct selector rules are b.bt+b and b.bb+b.
December 30th, 2008 at 10:15 pm
Hello,
Boss I am using this code looking very easy and this is my requirement. But its not working with me.
——–css———-
b.bt, b.bt+b, b.bb, b.bb+b{
display: block;
height: 10px;
font-size: 1px;
background:url(grey.gif) no-repeat;
position:relative
}
b.bt {top: -3px; left: -3px}
b.bt+b {background-position:100% -10px; left: 3px;}
b.bb {background-position:0 -20px; top:3px; left: -3px}
b.bb+b {background-position:100% -30px; left: 3px}
#grey_border {border: #ddd 3px solid}
——–end css——
———HTML——–
sfsdfsd
—–End HTML——–
January 6th, 2009 at 8:57 pm
Can I just ask – sorry if this is an obvious one – but why are you using elements and not, say s?
January 7th, 2009 at 7:22 am
There is no particular reason for for using elements.
January 24th, 2009 at 2:01 am
For me, only the left corners (top and bottom) are rounded. both right corners are not rounded but square. I just did a cut and paste job here. did i miss something?
January 24th, 2009 at 8:20 am
There is an issue with the sample markup you have posted and due to that it is rounding only the left sides but not right sides.
Instead of
[your content]
it should have been
# [your content]
However thank for the idea. It works great.
January 31st, 2009 at 7:22 pm
Most fantastic solution to corners. I have hunted through many examples and this one takes the cake.
HTML CORRECTION
The example is incorrect as Carlos identified.
The html should be as follows. (Note because html may not be allowed, each line is a tag which should be surround by greater/less than symbols except for line “your content”).
b class=”bt”
/b
b
/b
[your content]
b class=”bb”
/b
b
/b
P.s, works in IE7 and FF2.
P.s.s, like how you used a B tag.
thank you for sharing this!
February 6th, 2009 at 7:01 am
great tutorial… thxs :)
February 17th, 2009 at 7:23 pm
i don’t know why, but copy and paste doesn’t work to me, so then i went just for the USA site and took the code from there and works :P!! here you go:
ertretretret
.leftbox{border:#ddd 3px solid;float:left;margin:0;width:41em}
b.bt,b.bt b,b.bb,b.bb b{background-image:url(i/grey.gif);background-repeat:no-repeat;display:block;font-size:1px;height:10px;position:relative}
b.bt{left:-3px;top:-3px}
b.bt b{background-position:100% -10px;left:6px;top:0}
b.bb{background-position:0 -20px;left:-3px;top:3px}
b.bb b{background-position:100% -30px;left:6px;top:0}
that’s it, enjoy my friends this great idea ;)
February 17th, 2009 at 7:24 pm
i forget: and in the body put:
ertretretret
February 18th, 2009 at 11:01 am
I upgrade this version to be easy to use with jquery who hide the calls, here you go:
put ypou jquery.js file in header and the jquery callto wrap your box:
$(document).ready(function(){
$(‘div.bigBox’).prepend(‘‘).append(‘ ‘);
});
then, add the following css:
.bigBox, .smallBox{border:#95B3D7 1px solid; background:#F7FBFE; float:left;margin:0;}
.bigBox .content, .smallBox .content{position:relative;}
/*BIG BOX CSS*/
.bigBox b.bt, .bigBox b.bt b,.bigBox b.bb,.bigBox b.bb b{background-image:url(../../images/bigBoxCorners.gif);background-repeat:no-repeat;display:block;font-size:1px;height:14px;position:relative}
/*Top Left*/
.bigBox, b.bt{left:-1px;top:-1px}
/*Top right*/
.bigBox, b.bt b{background-position:100% -14px;left:2px;top:0} /*background-position:100% ()put height corners with negative sign); left: (Adjust depending on image);top:0(Adjust depending on image)*/
/*bottom left*/
.bigBox, b.bb{background-position:0 -28px;left:-1px;top:1px} /*background-position:100% ()put height corners*2 with negative sign); left: (Adjust depending on image);top:0(Adjust depending on image)*/
/*bottom right*/
.bigBox, b.bb b{background-position:100% -42px;left:2px;top:0} /*background-position:100% ()put heightcorners*3 with negative sign); left: (Adjust depending on image);top:0(Adjust depending on image)*/
then, just call your box in the html:
hey this is a rounded simple box!
looks pretty and simple :P!
(don’t forget vreate oyur own images)
cheers!
February 18th, 2009 at 11:02 am
to bad, html code is not allowed in thnis post :S
March 22nd, 2009 at 2:42 am
[...] http://www.tillett.info/2007/09/11/orb-fluid-css-one-image-round-borders/ [...]
November 10th, 2009 at 6:47 pm
You could try FlexiPanels CSS, Dreamweaver extension that generates rounded corners css boxes from an easy to use interface.
http://www.extendstudio.com/product/flexipanels_css.html