<!DOCTYPE HTML>
<head>
  <style>
    .box {
      height: 100px;
      width: 100px;
      display: inline-block;
      background-color: red;
    }
    .border-20 {
      border: 20px solid;
    }
    .border-40 {
      border: solid;
      border-top: 0px;
      border-right: 40px;
      border-bottom: 40px;
      border-left: 0px;      
    }
    .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-140-intrinsic {
       border-image: url('resources/svg-border-140x140-intrinsic.svg') 0 fill;
    }
    .border-image-140-intrinsic-slice {
       border-image: url('resources/svg-border-140x140-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-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-140-intrinsic-slice"></div>
  <br>
  <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-140-intrinsic-slice"></div>
  <br>
  <div class="box no-border border-image-100-intrinsic"></div>
  <div class="box border-20"></div>
  <div class="box no-border border-image-100-intrinsic-slice"></div>
  <div class="box border-40 border-image-100-intrinsic"></div>
</body>