CSS Rounded Corners Without Images

Friday, February 24, 2006

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. 

<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>

by