CSS Rounded box container with Sprites – No hacks, IE6, IE7, Firefox 2, Firefox 3 (and others) compatible
Dear all,
while working to the great beta 2 of www.agglom.com, finally I found my way on the code for a CSS Rounded box container that:
- doesn’t uses <img> tags
- uses sprite in corners
- is W3C compliant
In a quick search, I couldn’t find any on the web (particularly, when dealing with Sprites). So, here’s my own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rounded boxes test</title> <style type="text/css"> .BC { position: relative; } .BCC { background:#0f0; } .BCT, .BCB { display: block; height: 5px; overflow: hidden; position: relative; width: 100%; } .BCTL, .BCTR, .BCBL, .BCBR { width: 5px; height: 5px; } .BCTL { /* Insert top left corner here */ background:#0ff; float: left; } .BCTR { /* Insert top right corner here */ background:#00f; float: right; } .BCBL { /* Insert bottom left corner here */ background:#fa0; float: left; } .BCBR { /* Insert bottom right corner here */ background:#ff0; float: right; } .BCTC, .BCBC { padding: 0 5px; position: relative; } .BCTM, .BCBM { background: #f0f; } </style> </head> <body style="padding: 20px;"> <div class="BC"> <div class="BCT"> <div style="position: absolute;"> <div class="BCTL"> </div> <div class="BCTR"> </div> </div> <div class="BCTC"> <div class="BCTM"> </div> </div> </div> <div class="BCC">DIV CONTENT</div> <div class="BCB"> <div style="position: absolute;"> <div class="BCBL"> </div> <div class="BCBR"> </div> </div> <div class="BCBC"> <div class="BCBM"> </div> </div> </div> </div> </body> </html>
Any comment would be much appreciated 
Enrico Foschi
It looks like the main drawback is lots of redundant markup.
I prefer the “-webkit/-moz-border-radius” method followed by the “screw you IE” method.
Mike
June 29, 2008 at 8:27 am
Hi Mike,
this CSS fix came out with the main purpose to get an only solution for every browser (safari, ie, ff, opera mainly). The markup may sound redundant, but actually I tried all the common solutions (nested, not nested, etc…) and nothing of these worked with sprites (without hacks).
Enrico Foschi
June 29, 2008 at 11:00 am
It does not work at all…
The result is not round, but square and not good square..
Tested in IE7, FF 3.1 and Opera 9.51
Jawaad
August 25, 2008 at 12:24 pm
May you post here your markup? (use
tags)Enrico Foschi
August 25, 2008 at 2:38 pm
davvero un pò troppo ridondante l’html. quasi quasi mi tengo gli angoli a 90
giuseppe
September 16, 2008 at 7:47 pm
hehe. Purtroppo e’ l’unico metodo che ho trovato per avere un box liquido orizzontalmente e verticalmente con angoli rotondi presi da sprites.
agglompress
September 16, 2008 at 11:38 pm
[...] – bookmarked by 5 members originally found by devijvers on 2008-11-13 CSS Rounded box container with Sprites – No hacks, IE6, IE7 … [...]
Bookmarks about Sprites
December 6, 2008 at 8:15 am
In 100% width sites it causes problem. …
Sree
March 4, 2009 at 7:14 pm