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

  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.