advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

deadmoon on 10/24/06


Tagged

css images corners ROUNDED with no just that works


Versions (?)


Who likes this?

18 people have marked this snippet as a favorite

jonhenshaw
joernba
postNuKe
Hirmine
basicmagic
willcodeforfood
robotoverlord
neuroasis
vali29
visuallyspun
angstmann
gAmUssA
cldwntrsdy
hans
titox
monapdx
latunov
Hollow


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

Embed | Plain TextExpand 
  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

You need to login to post a comment.