border-image-repeat-round-ref.html

Enable keyboard shortcuts

<!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>