border-image-repeat-round-ref.html (2396B)
1 <!DOCTYPE html> 2 <title>CSS Border Image: border-image-repeat: round (reference)</title> 3 <style type="text/css"> 4 .container { 5 position: relative; 6 width: 96px; 7 height: 96px; 8 } 9 .container > div { 10 position: absolute; 11 width: 16px; 12 height: 16px; 13 background-image: url("../support/border.png"); 14 background-size: 48px 48px; 15 } 16 .top { top: 0; } 17 .right { left: 80px; } 18 .bottom { top: 80px; } 19 .left { left: 0; } 20 .top-left-corner-tile { background-position: 0px 0px; } 21 .top-edge-tile { background-position: -16px 0px; } 22 .top-right-corner-tile { background-position: -32px 0px; } 23 .left-edge-tile { background-position: 0px -16px; } 24 .right-edge-tile { background-position: -32px -16px; } 25 .bottom-left-corner-tile { background-position: 0px -32px; } 26 .bottom-edge-tile { background-position: -16px -32px; } 27 .bottom-right-corner-tile { background-position: -32px -32px; } 28 .h-pos-0 { left: 16px; } 29 .h-pos-1 { left: 32px; } 30 .h-pos-2 { left: 48px; } 31 .h-pos-3 { left: 64px; } 32 .v-pos-0 { top: 16px; } 33 .v-pos-1 { top: 32px; } 34 .v-pos-2 { top: 48px; } 35 .v-pos-3 { top: 64px; } 36 </style> 37 <p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p> 38 <div class="container"> 39 <div class="top left top-left-corner-tile"></div> 40 <div class="top top-edge-tile h-pos-0"></div> 41 <div class="top top-edge-tile h-pos-1"></div> 42 <div class="top top-edge-tile h-pos-2"></div> 43 <div class="top top-edge-tile h-pos-3"></div> 44 <div class="top right top-right-corner-tile"></div> 45 <div class="right right-edge-tile v-pos-0"></div> 46 <div class="right right-edge-tile v-pos-1"></div> 47 <div class="right right-edge-tile v-pos-2"></div> 48 <div class="right right-edge-tile v-pos-3"></div> 49 <div class="bottom right bottom-right-corner-tile"></div> 50 <div class="bottom bottom-edge-tile h-pos-0"></div> 51 <div class="bottom bottom-edge-tile h-pos-1"></div> 52 <div class="bottom bottom-edge-tile h-pos-2"></div> 53 <div class="bottom bottom-edge-tile h-pos-3"></div> 54 <div class="bottom left bottom-left-corner-tile"></div> 55 <div class="left left-edge-tile v-pos-0"></div> 56 <div class="left left-edge-tile v-pos-1"></div> 57 <div class="left left-edge-tile v-pos-2"></div> 58 <div class="left left-edge-tile v-pos-3"></div> 59 </div>