Advanced Search

rounded corners with no images, just css, THAT WORKS

/ Published in: HTML
Save to your folder(s)
based on http://snipplr.com/view.php?codeview&id=1460, but actually works stright out of the box

Expand | Embed | Plain Text

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.