Advanced Search

Optimized CSS Rounded Corners Using Sprites

/ Published in: CSS
Save to your folder(s)
<p>Cross-browser compatible especially for IE6/7 and makes use of CSS sprites for faster downloading. Download file <a href="http://johnimbong.com/blog/wp-content/uploads/2009/09/curves.zip">curves.zip (75 bytes)</a> which contains the CSS sprite needed to make this work.</p>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.