Posted By

shabbar on 12/16/09


Tagged

corner round


Versions (?)

Round Corners


 / Published in: CSS
 

  1. CSS Code
  2. .rounded_box {
  3. position: relative;
  4. background-color: #fff;
  5. border: 1px solid #e5e5e5;
  6. padding: 11px;
  7. }
  8.  
  9. .rounded_box .r1,
  10. .rounded_box .r2,
  11. .rounded_box .r3,
  12. .rounded_box .r4 {
  13. background: url(../images/layout/rounded_corners.png) no-repeat left top;
  14. width: 10px;
  15. height: 10px;
  16. position: absolute;
  17. overflow: hidden;
  18. }
  19.  
  20. .rounded_box .r1, .rounded_box .r2 { top: -1px; }
  21. .rounded_box .r3, .rounded_box .r4 { bottom: -1px; }
  22. .rounded_box .r1, .rounded_box .r3 { left: -1px; }
  23. .rounded_box .r2, .rounded_box .r4 { right: -1px; }
  24. .rounded_box .r2 { background-position: right top; }
  25. .rounded_box .r3 { background-position: left -10px; }
  26. .rounded_box .r4 { background-position: right -10px; }
  27.  
  28. HTML Code
  29.  
  30. <div class="rounded_box">
  31. Text here ..
  32. <span class="r1"/><span class="r2"/><span class="r3"/><span class="r4"/></div>

Report this snippet  

You need to login to post a comment.