Comments on: ORB | Fluid CSS One Image Round Borders

By: Steve

Steve — Sun, 05 Sep 2010 21:51:43 +0000

Can’t get anything to work in IE 8, Opera 10 or Firefox 3.6.8.

Frustrating!

By: CSS Rounded Corners ‘Roundup’ | Look Where? Right Here!

Mon, 01 Mar 2010 20:07:37 +0000

[...] 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!