<html>
<head>
<style>
    .svg, .image {
      display: inline-block;
      border: 1px solid black;
    }

    .svg > div, .image > div {
        border-width: 30px 30px 30px 30px;
        border-style: solid;
        height: 100px;
        width: 100px;
        margin: 10px;
        outline: 1px solid black;
        display: inline-block;
    }
    
    .svg > .rr {
        -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 repeat repeat;
    }
    
    .svg > .rs {
        -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 repeat stretch;
    }
    
    .svg > .sr {
        -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 stretch repeat;
    }
    
    .svg > .ss {
        -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 stretch stretch;
    }

    .image > .rr {
        -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 repeat repeat;
    }
    
    .image > .rs {
        -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 repeat stretch;
    }
    
    .image > .sr {
        -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 stretch repeat;
    }
    
    .image > .ss {
        -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 stretch stretch;
    }
</style>
</head>
<body>

  <!-- Left and right sides should look identical -->
  <div class="svg">
    <h2>SVG border-image</h2>
    <div class="rr"></div>
    <div class="rs"></div><br>
    <div class="sr"></div>
    <div class="ss"></div>
  </div>

  <div class="image">
    <h2>PNG border-image</h2>
    <div class="rr"></div>
    <div class="rs"></div><br>
    <div class="sr"></div>
    <div class="ss"></div>
  </div>

</body>
</html>