Posted By

robnilas on 01/21/17


Tagged

background background-border


Versions (?)

Background Border


 / Published in: CSS
 

  1. .bg {
  2. border-left: 0;
  3. border-right: 0;
  4. border-top: 5px solid transparent;
  5. border-bottom: 5px solid transparent;
  6. -webkit-border-image-source: url(img/bg/roughedge_gray.png);
  7. -moz-border-image-source: url(img/bg/roughedge_gray.png);
  8. -ms-border-image-source: url(img/bg/roughedge_gray.png);
  9. -o-border-image-source: url(img/bg/roughedge_gray.png);
  10. border-image-source: url(img/bg/roughedge_gray.png);
  11. -webkit-border-image-slice: 32;
  12. -moz-border-image-slice: 32;
  13. -ms-border-image-slice: 32;
  14. -o-border-image-slice: 32;
  15. border-image-slice: 32;
  16. -webkit-border-image-width: 0.8em;
  17. -moz-border-image-width: 0.8em;
  18. -ms-border-image-width: 0.8em;
  19. -o-border-image-width: 0.8em;
  20. border-image-width: 0.8em;
  21. -webkit-border-image-outset: 0.35em;
  22. -moz-border-image-outset: 0.35em;
  23. -ms-border-image-outset: 0.35em;
  24. -o-border-image-outset: 0.35em;
  25. border-image-outset: 0.35em;
  26. -webkit-border-image-repeat: repeat stretch;
  27. -moz-border-image-repeat: repeat stretch;
  28. -ms-border-image-repeat: repeat stretch;
  29. -o-border-image-repeat: repeat stretch;
  30. border-image-repeat: repeat stretch; }
  31.  
  32. .bg.red {
  33. background: #ed1c24;
  34. -webkit-border-image-source: url(img/bg/roughedge_red.png);
  35. -moz-border-image-source: url(img/bg/roughedge_red.png);
  36. -ms-border-image-source: url(img/bg/roughedge_red.png);
  37. -o-border-image-source: url(img/bg/roughedge_red.png);
  38. border-image-source: url(img/bg/roughedge_red.png); }
  39.  
  40. .roughedge.red-large {
  41. background: #ed1c24;
  42. -webkit-border-image-source: url(img/bg/roughedge_red_large.png);
  43. -moz-border-image-source: url(img/bg/roughedge_red_large.png);
  44. -ms-border-image-source: url(img/bg/roughedge_red_large.png);
  45. -o-border-image-source: url(img/bg/roughedge_red_large.png);
  46. border-image-source: url(img/bg/roughedge_red_large.png); }
  47.  
  48. .roughedge.red-large:hover {
  49. background: #000;
  50. -webkit-border-image-source: url(img/bg/roughedge_black_large.png);
  51. -moz-border-image-source: url(img/bg/roughedge_black_large.png);
  52. -ms-border-image-source: url(img/bg/roughedge_black_large.png);
  53. -o-border-image-source: url(img/bg/roughedge_black_large.png);
  54. border-image-source: url(img/bg/roughedge_black_large.png); }

Report this snippet  

You need to login to post a comment.