Posted By

vagrantradio on 02/16/10


Tagged

css corners ROUNDED round


Versions (?)

BETTER CSS ROUNDED CORNERS


 / Published in: CSS
 

Requires markup, yes. Cross-Browser compatible, yes. Requires images, no.

  1. /*CSS */
  2. b.rtop, b.rbottom{display:block;background:#fff;overflow:hidden;}
  3. b.rtop b, b.rbottom b{display:block;height:1px;
  4. overflow: hidden; background: #666}
  5. b.r1{margin: 0 5px}
  6. b.r2{margin: 0 3px}
  7. b.r3{margin: 0 2px}
  8. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  9.  
  10. <!-- Markup -->
  11. <div id="wrapper">
  12. <!-- top corners -->
  13. <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  14. <!-- Content -->
  15. <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
  16. <!-- bottom content -->
  17. </div>

Report this snippet  

You need to login to post a comment.