border-image-repeating-linear-gradient-repeat-round-2.html 718 B

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <title>test of border-image-source: linear-gradient with border-image-repeat</title>
  5. <style>
  6. div {
  7. border: 30px solid black;
  8. border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
  9. width: 180px;
  10. height: 180px;
  11. }
  12. div.border60round {
  13. border-image-repeat: round;
  14. border-image-slice: 60;
  15. }
  16. div.border60fillround {
  17. border-image-repeat: round;
  18. border-image-slice: 60 fill;
  19. }
  20. div.border30fill2round {
  21. border-image-repeat: round;
  22. border-image-slice: 30 fill;
  23. border-image-width: 2;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="border60round"></div>
  29. <div class="border60fillround"></div>
  30. <div class="border30fill2round"></div>
  31. </body>
  32. </html>