Posted By

webdevelopertut on 07/01/09


Tagged

css corners ROUNDED nifty


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

myrebel420
jigar
zartgesotten
marcocs
Some0ne
steviraab


Pure css rounded corners without images


 / Published in: CSS
 

URL: http://htmlcsstutorials.blogspot.com/2009/07/rounded-corners-using-css.html

  1. The simple way of using rounded corners using css with the header and the content in it.
  2.  
  3. HTML:
  4. <b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
  5. <div class="headh">
  6. <h3>Here is your Header!</h3>
  7. </div>
  8. <div class="contenth">
  9. <div>No images!</div>
  10. </div>
  11. <b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>
  12.  
  13. CSS:
  14. .b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
  15. .b1h {height:1px; background:#aaa; margin:0 5px;}
  16. .b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
  17. .b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
  18. .b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
  19. .b2bh, .b3bh, .b4bh {background: #ddd;}
  20. .headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
  21. .headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
  22. .contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
  23. .contenth div {margin-left: 12px; padding-top: 5px;}

Report this snippet  

You need to login to post a comment.