CSS ROUNDED CORNERS

Mark As Favorite CSS css corners rounded saved by 1 people
posted on 2009-09-11 16:38:25+08:00 by 7895734
  1. CSS
  2. /* set millions of background images */
  3. .rbroundbox { background: url(nt.gif) repeat; }
  4. .rbtop div { background: url(tl.gif) no-repeat top left; }
  5. .rbtop { background: url(tr.gif) no-repeat top right; }
  6. .rbbot div { background: url(bl.gif) no-repeat bottom left; }
  7. .rbbot { background: url(br.gif) no-repeat bottom right; }
  8.  
  9. /* height and width stuff, width not really nessisary. */
  10. .rbtop div, .rbtop, .rbbot div, .rbbot {
  11. width: 100%;
  12. height: 7px;
  13. font-size: 1px;
  14. }
  15. .rbcontent { margin: 0 7px; }
  16. .rbroundbox { width: 50%; margin: 1em auto; }
  17.  
  18.  
  19.  
  20. HTML
  21.  
  22. <div class="rbroundbox">
  23. <div class="rbtop"><div></div></div>
  24. <div class="rbcontent">
  25. <p>Lorem ipsum dolor sit amet,
  26. consectetuer adipiscing elit. Duis
  27. ornare ultricies libero. Donec
  28. fringilla, eros at dapibus fermentum,
  29. tellus tellus auctor erat, vitae porta
  30. magna libero sed libero. Mauris sed leo.
  31. Aliquam aliquam. Maecenas vestibulum.</p>
  32. </div><!-- /rbcontent -->
  33. <div class="rbbot"><div></div></div>
  34. </div><!-- /rbroundbox -->

Comments

posted on 2009-09-11 17:51:26+08:00 by david
this is a good one guy and it'll be fast to apply, notice that you should create the images first!
posted on 2009-09-11 17:52:07+08:00 by david
that's some nasty looking markup, imo.

i'd rather just leave IE out of the loop with rounded corners, and stick with -moz and -webkit until border-radius is fully adapted.

All Code Snippets

Hot Code Snippets

New Code Snippets