Posted By

Malte on 01/31/08


Tagged

css ROUNDED corner full layer reziseable


Versions (?)

Who likes this?

17 people have marked this snippet as a favorite

jacksenechal
Malte
basicmagic
spekulatius
jonhenshaw
bmayzure
JimiJay
skipper13
jero
DrHouseMD
newpress
dhavalpatel
steviraab
cchitsiang
jalalx
rizm
wirenaught


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).

  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: d4rk on February 6, 2008

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

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: jstnjns on February 13, 2009

that's some nasty looking markup, imo.

Posted By: batfan on July 3, 2010

Broken in IE6, IE7 and IE8

Posted By: mcederberg on October 29, 2010

Is there any solution to fixing this for IE? At least 7/8?

You need to login to post a comment.