<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Border Image: border-image-repeat: space</title> <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> <link rel="author" title="Mozilla" href="https://www.mozilla.org"> <style type="text/css"> .outer { width: 81px; height: 81px; } .inner1 { position: absolute; top: 0px; left: 0px; width: 27px; height: 27px; background-image: url("reticule-tl.png"); } .inner2 { position: absolute; top: 0px; left: 27px; width: 27px; height: 27px; background-image: url("reticule-to.png"); } .inner3 { position: absolute; top: 0px; left: 54px; width: 27px; height: 27px; background-image: url("reticule-tr.png"); } .inner4 { position: absolute; top: 27px; left: 0px; width: 27px; height: 27px; background-image: url("reticule-le.png"); } .inner5 { position: absolute; top: 27px; left: 27px; width: 27px; height: 27px; background-image: url("reticule-ct.png"); } .inner6 { position: absolute; top: 27px; left: 54px; width: 27px; height: 27px; background-image: url("reticule-ri.png"); } .inner7 { position: absolute; top: 54px; left: 0px; width: 27px; height: 27px; background-image: url("reticule-bl.png"); } .inner8 { position: absolute; top: 54px; left: 27px; width: 27px; height: 27px; background-image: url("reticule-bo.png"); } .inner9 { position: absolute; top: 54px; left: 54px; width: 27px; height: 27px; background-image: url("reticule-br.png"); } </style> </head> <body> <div class="outer"> <div class="inner1"></div> <div class="inner2"></div> <div class="inner3"></div> <div class="inner4"></div> <div class="inner5"></div> <div class="inner6"></div> <div class="inner7"></div> <div class="inner8"></div> <div class="inner9"></div> </div> </body> </html>