Advanced Search

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

Expand | Embed | Plain Text

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.