<!DOCTYPE HTML>
<head>
  <style>
    .box {
      height: 100px;
      width: 100px;
      display: inline-block;
      background-color: red;
    }
    .border-20 {
      border: 20px solid;
    }
    .no-border {
      border: 0px none;
    }
    .border-image-100-intrinsic {
       border-image: url('resources/svg-border-100x100-intrinsic.svg') 0 fill;
    }
    .border-image-100-intrinsic-slice {
       border-image: url('resources/svg-border-100x100-intrinsic.svg') 20 fill;
    }
    .border-image-100-viewbox {
       border-image: url('resources/svg-border-100x100-viewbox.svg') 0 fill;
    }
    .border-image-100-viewbox-slice {
       border-image: url('resources/svg-border-100x100-viewbox.svg') 20 fill;
    }
    .border-image-100-relative {
       border-image: url('resources/svg-border-100x100-relative.svg') 0 fill;
    }
    .border-image-100-relative-slice {
       border-image: url('resources/svg-border-100x100-relative.svg') 20 fill;
    }
    .border-image-no-intrinsic {
       border-image: url('resources/svg-border-no-intrinsic.svg') 0 fill;
    }
    .border-image-no-intrinsic-slice {
       border-image: url('resources/svg-border-no-intrinsic.svg') 20 fill;
    }
  </style>
</head>
<body>
  <div class="box no-border border-image-100-intrinsic"></div>
  <div class="box border-20 border-image-100-intrinsic"></div>
  <div class="box no-border border-image-100-intrinsic-slice"></div>
  <div class="box border-20 border-image-100-intrinsic-slice"></div>
  <br>
  <div class="box no-border border-image-100-viewbox"></div>
  <div class="box border-20 border-image-100-viewbox"></div>
  <div class="box no-border border-image-100-viewbox-slice"></div>
  <div class="box border-20 border-image-100-viewbox-slice"></div>
  <br>
  <div class="box no-border border-image-100-relative"></div>
  <div class="box border-20 border-image-100-relative"></div>
  <div class="box no-border border-image-100-relative-slice"></div>
  <div class="box border-20 border-image-100-relative-slice"></div>
  <br>
  <div class="box no-border border-image-no-intrinsic"></div>
  <div class="box border-20"></div>
  <div class="box no-border border-image-no-intrinsic-slice"></div>
  <div class="box border-20 border-image-no-intrinsic-slice"></div>
</body>