Advanced Search

Rounded corners with images

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div class=”roundcont”>
  2. <div class=”roundtop”>
  3. <img src=”tl.gif” alt=”"
  4. width=”15″ height=”15″ class=”corner”
  5. style=”display: none” />
  6. </div>
  7.  
  8. CONTENT
  9.  
  10. <div class=”roundbottom”>
  11. <img src=”bl.gif” alt=”"
  12. width=”15″ height=”15″ class=”corner”
  13. style=”display: none” />
  14. </div>
  15. </div>
  16.  
  17. .roundcont {
  18. width: 250px;
  19. background-color: #f90;
  20. color: #fff;
  21. }
  22.  
  23. .roundcont p {
  24. margin: 0 10px;
  25. }
  26.  
  27. .roundtop {
  28. background: url(tr.gif) no-repeat top right;
  29. }
  30.  
  31. .roundbottom {
  32. background: url(br.gif) no-repeat top right;
  33. }
  34.  
  35. img.corner {
  36. width: 15px;
  37. height: 15px;
  38. border: none;
  39. display: block !important;
  40. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.