Advanced CSS ROUNDED CORNERS


/ Published in: CSS
Save to your folder(s)

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

Resize browserside fontsize for the testpage (see URL).


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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.