PDA

View Full Version : [CSS]border with rounded corners



toploads
11-19-2007, 07:05 AM
Do you see this nice border with rounded corners ? :) see below



<div style="width: 260px;">
<b style="font-size:1px;display:block; overflow:hidden;">
<b style="background:#78AAFF; color: inherit; display:block; overflow:hidden;height:1px;margin:0 5px;"></b>
<b style="background:#DDDDFF; border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 3px; border-width:0 2px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 2px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;border-style: solid; border-width: 0 1px;height:2px; margin:0 1px;"></b>
</b>
<div style="background:#DDDDFF; border-color: #78AAFF; color: inherit; display:block; border-style: solid ; border-width: 0 1px;">
<b style="font-size:1px;display:block; overflow:hidden;height:1px;"></b>

-- YOUR CONTENT GOES HERE --

<b style="font-size:1px;display:block; overflow:hidden;height:1px;"></b>
</div>
<b style="font-size:1px;display:block; overflow:hidden;">
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;border-style: solid; border-width: 0 1px;height:2px; margin:0 1px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 2px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 3px; border-width:0 2px;"></b>
<b style="background:#78AAFF; color: inherit; display:block; overflow:hidden;height:1px;margin:0 5px;"></b>
</b>
</div>

jscheuer1
11-19-2007, 07:48 AM
This is actually very nice! However, the style should go in the head or in an external stylesheet. Also, some elements of the style are redundant. They should be streamlined.

jscheuer1
11-19-2007, 04:26 PM
I did a little searching on Google and found that the above technique w/proper styling already exists:

http://www.cssplay.co.uk/boxes/snazzy.html

http://www.cssplay.co.uk/boxes/chunky.html

http://www.spiffycorners.com/