CSS Rounded Corners Without Images
I found a neat trick the other day at http://www.cssplay.co.uk/boxes/snazzy.html. It's not new, but its CSS2, cross-browser compatable, and uses no scripting.
For those interested, the illusion is accomplished by placing graduated 2px and 1px tall div tags, with specific border attributes, below one another.
For those interested, the illusion is accomplished by placing graduated 2px and 1px tall div tags, with specific border attributes, below one another.
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .txb2, .txb3, .txb4,
.bxb2, .bxb3, .bxb4 {display:block; overflow:hidden;}
.xb1, .txb2, .txb3,
.bxb2, .bxb3{height:1px;}
.txb2, .txb3, .txb4 {background:#d4d4d4; border-left:1px solid #000000; border-right:1px solid #767676;}
.bxb2, .bxb3, .bxb4 {background:#d4d4d4; border-left:1px solid #000000; border-right:1px solid #767676;}
.xb1 {margin:0 5px; background:#767676;}
.txb2 {margin:0 3px; border-width:0 2px;}
.txb3 {margin:0 2px;}
.txb4 {height:2px; margin:0 1px;}
.bxb2 {margin:0 3px; border-width:0 2px;}
.bxb3 {margin:0 2px;}
.bxb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background-color:#d4d4d4; border:0 solid #767676; border-width:0 1px;}
</style>
<!--Somewhere In The Document-->
<div id="xsnazzy" style="width:75px;">
<div class="xtop">
<div class="xb1"></div>
<div class="txb2"></div>
<div class="txb3"></div>
<div class="txb4"></div>
</div>
<div class="xboxcontent" style="height:65px;">
<table cellpadding=0 cellspacing=0 border=0 width="100%" height="100%" valign="center"><tr><td align="center">Test</td></tr></table>
</div>
<div class="xbottom">
<div class="bxb4"></div>
<div class="bxb3"></div>
<div class="bxb2"></div>
<div class="xb1"></div>
</div>
</div>
