advanced code snippet search

Posted By

enchance on 09/06/09


Tagged

css corners ROUNDED short


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

vali29
TraceyM
rasitozcan


Optimized CSS Rounded Corners Using Sprites

 / Published in: CSS
 

Cross-browser compatible especially for IE6/7 and makes use of CSS sprites for faster downloading. Download file curves.zip (75 bytes) which contains the CSS sprite needed to make this work.

Expand | Embed | Plain Text 
  1. /*
  2. HTML source:
  3. <div class="rounded">
  4. 	<div class="crv_top"><div></div></div>
  5. 	<div class="info">z</div>
  6. 	<div class="crv_btm"><div></div></div>
  7. </div>
  8. */
  9.  
  10. .rounded {width:200px; margin:100px auto 0; background:#a7c8dc;}
  11. .rounded .crv_top, .rounded .crv_top div, .rounded .crv_btm, .rounded .crv_btm div {height:3px; background:url(curves.gif) 0 0 no-repeat; _font-size:0;}
  12. .rounded .crv_top {background-position:right -3px;}
  13. .rounded .crv_btm {background-position:right -9px;}
  14. .rounded .crv_btm div {background-position:0 -6px;}

Report this snippet  

You need to login to post a comment.