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.
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.
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.
Wouldn’t that be nice. Doesn’t work for me though in Firefox 3.0.1. Does however in IE6?
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!
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.
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.
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——–
Can I just ask – sorry if this is an obvious one – but why are you using elements and not, say s?
There is no particular reason for for using elements.
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?
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.
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!
great tutorial… thxs :)
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 ;)
i forget: and in the body put:
ertretretret
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!
to bad, html code is not allowed in thnis post :S
Pingback: blog.johnjcamilleri.com » Rounded corners (a few years too late)
Pingback: CSS Rounded Corners ‘Roundup’ | Look Where? Right Here!
Can’t get anything to work in IE 8, Opera 10 or Firefox 3.6.8.
Frustrating!