Advanced Search

Pure css rounded corners without images

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.