<!DOCTYPE html>
<title>CSS Border Image: border-image-repeat: round (reference)</title>
<style type="text/css">
  .container {
    position: relative;
    width: 96px;
    height: 96px;
  }
  .container > div {
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url("../support/border.png");
    background-size: 48px 48px;
  }
  .top { top: 0; }
  .right { left: 80px; }
  .bottom { top: 80px; }
  .left { left: 0; }
  .top-left-corner-tile     { background-position:   0px   0px; }
  .top-edge-tile            { background-position: -16px   0px; }
  .top-right-corner-tile    { background-position: -32px   0px; }
  .left-edge-tile           { background-position:   0px -16px; }
  .right-edge-tile          { background-position: -32px -16px; }
  .bottom-left-corner-tile  { background-position:   0px -32px; }
  .bottom-edge-tile         { background-position: -16px -32px; }
  .bottom-right-corner-tile { background-position: -32px -32px; }
  .h-pos-0 { left: 16px; }
  .h-pos-1 { left: 32px; }
  .h-pos-2 { left: 48px; }
  .h-pos-3 { left: 64px; }
  .v-pos-0 { top: 16px; }
  .v-pos-1 { top: 32px; }
  .v-pos-2 { top: 48px; }
  .v-pos-3 { top: 64px; }
</style>
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
<div class="container">
  <div class="top left top-left-corner-tile"></div>
  <div class="top top-edge-tile h-pos-0"></div>
  <div class="top top-edge-tile h-pos-1"></div>
  <div class="top top-edge-tile h-pos-2"></div>
  <div class="top top-edge-tile h-pos-3"></div>
  <div class="top right top-right-corner-tile"></div>
  <div class="right right-edge-tile v-pos-0"></div>
  <div class="right right-edge-tile v-pos-1"></div>
  <div class="right right-edge-tile v-pos-2"></div>
  <div class="right right-edge-tile v-pos-3"></div>
  <div class="bottom right bottom-right-corner-tile"></div>
  <div class="bottom bottom-edge-tile h-pos-0"></div>
  <div class="bottom bottom-edge-tile h-pos-1"></div>
  <div class="bottom bottom-edge-tile h-pos-2"></div>
  <div class="bottom bottom-edge-tile h-pos-3"></div>
  <div class="bottom left bottom-left-corner-tile"></div>
  <div class="left left-edge-tile v-pos-0"></div>
  <div class="left left-edge-tile v-pos-1"></div>
  <div class="left left-edge-tile v-pos-2"></div>
  <div class="left left-edge-tile v-pos-3"></div>
</div>
