advanced code snippet search

Posted By

shabbar on 12/16/09


Tagged

corner round


Versions (?)

Round Corners

 / Published in: CSS
 
Expand | Embed | Plain Text 
  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.