advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

olive on 10/24/06


Tagged

coins


Versions (?)


Who likes this?

20 people have marked this snippet as a favorite

meth
postNuKe
visualAesthetic
User01
Hirmine
icarus
DataSquirrel
tidbit
neuroasis
vali29
visuallyspun
starprojector
dkypuros
gAmUssA
Theanthrope
JimiJay
snucko
jonhenshaw
jamesming
sudhakmy


rounded corners without images

Published in: CSS 

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

Plain TextExpand 
  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.

You need to login to post a comment.