<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Border Image: border-image-repeat: round</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("border.png"); } .inner2 { position: absolute; top: 0px; left: 27px; width: 13px; height: 27px; background-size: 39px 81px; background-image: url("border.png"); background-position: -13px 0px; } .inner3 { position: absolute; top: 0px; left: 40px; width: 27px; height: 27px; background-image: url("border.png"); } .inner4 { position: absolute; top: 27px; left: 0px; width: 27px; height: 13px; background-size: 81px 39px; background-image: url("border.png"); background-position: 0px -13px; } .inner5 { position: absolute; top: 27px; left: 40px; width: 27px; height: 13px; background-size: 81px 39px; background-image: url("border.png"); background-position: -54px -13px; } .inner6 { position: absolute; top: 40px; left: 0px; width: 27px; height: 27px; background-image: url("border.png"); } .inner7 { position: absolute; top: 40px; left: 27px; width: 13px; height: 27px; background-size: 39px 81px; background-image: url("border.png"); background-position: -13px -54px; } .inner8 { position: absolute; top: 40px; left: 40px; width: 27px; height: 27px; background-image: url("border.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> </body> </html>