advanced code snippet search

rounded corners without images

 / Published in: CSS
 

URL: http://www.html.it/articoli/nifty/index.html

Expand | Embed | Plain Text 
  1. <div id="container">
  2. <b class="rtop">
  3.   <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  4. </b>
  5. <!--content goes here -->
  6. <b class="rbottom">
  7.   <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  8. </b>
  9. </div>
  10.  
  11. And here's it the basic CSS:
  12.  
  13. .rtop, .rbottom{display:block}
  14. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
  15. .r1{margin: 0 5px}
  16. .r2{margin: 0 3px}
  17. .r3{margin: 0 2px}
  18. .r4{margin: 0 1px; height: 2px}

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on June 28, 2008

This is a nice solution for rounded corners, especially without images. Although the corners are technically pixelated, with the onset of higher resolution screens, it's not nearly as noticeable anymore.

Posted By: Semmu on May 24, 2010

good trick, but very much code. and why are u doing it with tag? or or were better.

You need to login to post a comment.