Comments on: ORB | Fluid CSS One Image Round Borders

By: Extend Studio

Extend Studio — Tue, 10 Nov 2009 09:47:12 +0000

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

By: blog.johnjcamilleri.com » Rounded corners (a few years too late)

blog.johnjcamilleri.com » Rounded corners (a few years too late) — Sat, 21 Mar 2009 17:42:45 +0000

[...] http://www.tillett.info/2007/09/11/orb-fluid-css-one-image-round-borders/ [...]

By: Manuel Cepeda

Manuel Cepeda — Wed, 18 Feb 2009 02:02:27 +0000

to bad, html code is not allowed in thnis post :S

By: Manuel Cepeda

Manuel Cepeda — Wed, 18 Feb 2009 02:01:53 +0000

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!

By: Manuel

Manuel — Tue, 17 Feb 2009 10:24:32 +0000

i forget: and in the body put: ertretretret

By: Manuel

Manuel — Tue, 17 Feb 2009 10:23:27 +0000

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 ;)

By: Honour Chick

Honour Chick — Thu, 05 Feb 2009 22:01:12 +0000

great tutorial… thxs :)

By: Valamas

Valamas — Sat, 31 Jan 2009 10:22:23 +0000

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!

By: Santhosh

Santhosh — Fri, 23 Jan 2009 23:20:54 +0000

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.

By: Jeff Thompson

Jeff Thompson — Fri, 23 Jan 2009 17:01:22 +0000

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?