advanced code snippet search

rounded corners with no images, just css, THAT WORKS

 / Published in: HTML
 

URL: http://www.internetsplash.com/

based on http://snipplr.com/view.php?codeview&id=1460, but actually works stright out of the box

Expand | Embed | Plain Text 
  1. <div id="container">
  2.  
  3. <b class="rtop">
  4.  
  5. <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  6.  
  7. </b>
  8. <div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
  9. <!--content goes here -->
  10.  
  11. <b class="rbottom">
  12.  
  13. <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  14.  
  15. </b>
  16.  
  17. </div>
  18. <div id="container">
  19.  
  20. <b class="rtop">
  21.  
  22. <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  23.  
  24. </b>
  25. <div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
  26. <!--content goes here -->
  27.  
  28. <b class="rbottom">
  29.  
  30. <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  31.  
  32. </b>
  33.  
  34. </div>
  35. <div id="container">
  36.  
  37. <b class="rtop">
  38.  
  39. <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  40.  
  41. </b>
  42. <div style="background: #f00; color: #fff; font-family:verdana;font-size:30px; padding:40px;text-align:center;">woop this has rounded corners...</div>
  43. <!--content goes here -->
  44.  
  45. <b class="rbottom">
  46.  
  47. <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  48.  
  49. </b>
  50.  
  51. </div><style type="text/css">
  52.  
  53. #container {
  54. margin-bottom:30px;
  55. }
  56. .rtop, .rbottom{display:block; }
  57.  
  58. .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden;
  59. background: red;}
  60.  
  61. .r1{margin: 0 5px;}
  62.  
  63. .r2{margin: 0 3px }
  64.  
  65. .r3{margin: 0 2px;
  66. }
  67.  
  68. .r4{margin: 0 1px; height: 2px;}
  69. </style>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: terriK on February 12, 2007

Not exactly right in IE5.5 but even there looks kinda cool.

Posted By: jarenado on January 25, 2008

why wouldn't you just use background images and css. This adds a lot of extra markup doesn't it?

Posted By: _Undefined on June 13, 2008

Hey something looks familiar here.

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

Posted By: ClarkeyBoy1987 on August 15, 2010

Um.. why not just use the border-radius approach?

Class .rounded with these attributes: -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

And then a div with class="rounded". Much simpler and takes about a quarter of the code. Ok so it wont work in IE at all, but it works in FF2 / 3, Opera (all as far as I know), Chrome and Safari. Oh and who cares about IE these days anyway? At least when it comes to things which arent required for the site to function (such as rounded corners)..

http://border-radius.com/ is a good site for rounded corners - just enter the radius for each corner and it does all the work for you.

Richard

You need to login to post a comment.