Advanced Search

BETTER CSS ROUNDED CORNERS

/ Published in: CSS
Save to your folder(s)
Requires markup, yes. Cross-Browser compatible, yes. Requires images, no.

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.