advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

Malte on 01/31/08


Tagged

css ROUNDED corner full layer reziseable


Versions (?)


Who likes this?

7 people have marked this snippet as a favorite

jacksenechal
Malte
basicmagic
spekulatius
jonhenshaw
bmayzure
JimiJay


Advanced CSS ROUNDED CORNERS

Published in: CSS 

URL: http://demo.mediaraum.com/snippets/corner.html

Full reziseable Boxmodel, nice for effectfull glow or shadow PNGs.

Resize browserside fontsize for the testpage (see URL).


Plain TextExpand 
  1. <style type="text/css">
  2. div.box { overflow:hidden} /* IE font-size fix */
  3. /* MIDDLE */
  4. 	div.box.body div.box.right {
  5. 		background-image:url(m_r.png); background-position: right; background-repeat: repeat-y;
  6. 	}
  7. 	div.box.body div.box.left {
  8. 		background-image:url(m_l.png); background-position: left; background-repeat: repeat-y;
  9. 	}
  10. 	div.box.body div.box.center {
  11. 		background-image:url(m_c.png); margin-left: 12px; margin-right: 12px;
  12. 	}
  13.  
  14. /* TOP */
  15. 	div.box.head div.box.right {
  16. 		background-image:url(t_r.png); background-position: top right; background-repeat: no-repeat; height:12px;
  17. 	}
  18. 	div.box.head div.box.left {
  19. 		background-image:url(t_l.png); background-position: top left; background-repeat: no-repeat; height:12px;
  20. 	}
  21. 	div.box.head div.box.center {
  22. 		background-image:url(t_c.png); height:12px;  margin-left: 12px; margin-right: 12px; 
  23. 	}
  24.  
  25. /* BOTTOM */
  26. 	div.box.foot div.box.right {
  27. 		background-image:url(b_r.png); background-position: right bottom; background-repeat: no-repeat; height:12px;
  28. 	}
  29. 	div.box.foot div.box.left {
  30. 		background-image:url(b_l.png); background-position: left bottom; background-repeat: no-repeat; height:12px;
  31. 	}
  32. 	div.box.foot div.box.center {
  33. 		background-image:url(b_c.png); margin-left: 12px; margin-right: 12px; height:12px; 
  34. 	}
  35.  
  36. </style>
  37.  
  38.  
  39. <div class="box head">
  40.     <div class="box right">
  41.     <div class="box left">
  42.     <div class="box center"></div>
  43.     </div>
  44.     </div>
  45. </div>
  46.  
  47. <div class="box body">
  48.     <div class="box right">
  49.     <div class="box left">
  50.     <div class="box center">TEXT</div>
  51.     </div>
  52.     </div>
  53. </div>
  54.  
  55. <div class="box foot">
  56.     <div class="box right">
  57.     <div class="box left">
  58.     <div class="box center"></div>
  59.     </div>
  60.     </div>
  61. </div>

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: hced on April 30, 2008

Cpnfirmed working in Safari 3.1 (4525.13) :) Screenshot: http://img142.imageshack.us/img142/5779/screenshot10hs2.png

Posted By: d4rk on February 6, 2008

Broken in Safari 3.0. :( Screenshot: http://la.gg/v/roundedBroken.png

You need to login to post a comment.