Posts Tagged ‘corners’
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
