<!doctype html><html><title>Reference: border-image-repeat:space</title><linkrel="author"title="Mats Palmgren"href="mailto:mats@mozilla.com"><style>body>div{position:relative;margin-bottom:calc(27px*2);}body>div>div{position:absolute;width:27px;height:27px;background-image:url("support/border.png");}.outer1{width:26px;height:26px;}.outer2{width:53px;height:53px;}.outer3{width:70px;height:70px;}.outer1>.inner2,.outer1>.inner4,.outer1>.inner5,.outer1>.inner7,.outer2>.inner2,.outer2>.inner4,.outer2>.inner5,.outer2>.inner7,.outer3>.inner2,.outer3>.inner3,.outer3>.inner5,.outer3>.inner6,.outer3>.inner7,.outer3>.inner8,.outer3>.inner10,.outer3>.inner11{background-position:-27px0px;}/* This mocks up the drawing algorithm for border-image, by hand, with an absolutely-positioned innerN div for each tile of a border image component. And the components are positioned using calc() expressions that involve: the border's thickness, the element's content-box size, and the expected number of tiled repetitions (e.g. 2) and gaps-between-repetitions (e.g. 3). */.outer1>.inner3,.outer1>.inner8{left:calc(27px+26px);}.outer1>.inner6,.outer1>.inner8{top:calc(27px+26px);}.outer2>.inner3,.outer2>.inner5,.outer2>.inner8{left:calc(27px+53px);}.outer2>.inner2,.outer2>.inner7{left:calc(27px+((53px-27px)/2));}.outer2>.inner4,.outer2>.inner5{top:calc(27px+((53px-27px)/2));}.outer2>.inner6,.outer2>.inner7,.outer2>.inner8{top:calc(27px+53px);}.outer3>.inner4,.outer3>.inner6,.outer3>.inner8,.outer3>.inner12{left:calc(27px+70px);}.outer3>.inner2,.outer3>.inner10{left:calc(27px+((70px-(27px*2))/3));}.outer3>.inner3,.outer3>.inner11{left:calc(70px-((70px-(27px*2))/3));}.outer3>.inner5,.outer3>.inner6{top:calc(27px+((70px-(27px*2))/3));}.outer3>.inner7,.outer3>.inner8{top:calc(70px-((70px-(27px*2))/3));}.outer3>.inner9,.outer3>.inner10,.outer3>.inner11,.outer3>.inner12{top:calc(27px+70px);}</style><divclass="outer1"><divclass="inner1"></div><divclass="inner3"></div><divclass="inner6"></div><divclass="inner8"></div></div><divclass="outer2"><divclass="inner1"></div><divclass="inner2"></div><divclass="inner3"></div><divclass="inner4"></div><divclass="inner5"></div><divclass="inner6"></div><divclass="inner7"></div><divclass="inner8"></div></div><divclass="outer3"><divclass="inner1"></div><divclass="inner2"></div><divclass="inner3"></div><divclass="inner4"></div><divclass="inner5"></div><divclass="inner6"></div><divclass="inner7"></div><divclass="inner8"></div><divclass="inner9"></div><divclass="inner10"></div><divclass="inner11"></div><divclass="inner12"></div></div></html>