<!-- Legacy code used as example code on http://css-plus.com/a-border-image-investigation -->
<div class="one-to-one">Example of 1:1 ratio</div>
<div class="three-to-one">Example of 3:1 ratio</div>
/* Using base64 images to not rely on external dependencies for the codepen */

.one-to-one {
    border-width: 30px;
}

.three-to-one {
    border-width: 90px;
}

div {
    border-style: solid; /* fallback property for browsers that don't support border-image */
    border-color: #d4d8da; /* fallback property for browsers that don't support border-image */
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    border-image-slice: 30;
    border-image-repeat: repeat;
    
    /* 
     * This could be repredented as `border-image: url(...) 30 repeat;`
     * but since I've turned the images into base64 I want to have
     * the useful css above the chunk of base64 text
     */
    -webkit-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlQTFRFOEtSiJOYhpGWVWVrh5KXcX6EiZSZy9DSwMbJjZicu8HEuL/BuL/Cv8XIyM3QwcfJvMLFxMrMx8zPucDCwsjKtby/ipWarLS3xcrNtLu+t77BxsvO8fLzzdLUvcPG0dXXyc7Qw8nLs7q9qrK1i5aaxszOjJebr7a6rra5z9PWys/RzNHTqbG1nKWpjpmdj5mesbi8n6isl6GloKmtoquupK2wpa2x09fZp6+zk52h4+XmhI+U0tbYkpyhhpKXkJqflqCkkZug0NTXhZCVlJ6if4uQztPVRlhfnqerY3F3mKKmOUxTQFJZMkVNRFZd/leh////1NjaKj5G3sgFdgAAAx9JREFUeNrsmGtT2kAUhk9iuIuCoFUMKiK2WlF7b62tvVFra9s9+f8/piRAV5LddzcmM53psF/YQZ9H5iRZXl8K4OLhK9at88OfkCWD+vs3nXv/oBRkUl8+faI2b22UOJuadz88U5nXN445q5p3vzxPmjvFPc6u5t03L+Lm5eIK56HmT+9exszOGuej5qOPr++aW84256Xmo6sTaa46m5yfmr+e9WfbhtdkezWJ6aKaKCjV3D19MNnseD2eV0uao5eLUTo1dyuRu+612aAWYmluIOOfh1u9mh8fPmIuu6scV0uaI3ogKinVXDp4uOqW2UI9SqvmkvO2zlg9GTalVvfc9/tmtT+kIK266TX2nC3TQAZiEKRVbzpV5pXiumnWLPoadbQqSfW20wpf1pyOQX0jph/PVr3mLE//hLdsuEOG0+to+aCvFDtyMC3O8QyZG3HTq+anjt0YPbeRl/q4OH87c9vbyUdd2jiPf4GtuvU81OOjI/m1W/5czq6ODrzkqocHVTb19JhOrp3x8ZpNfdrXRb6G286mPtGmSa66P7Ca4foNF2bpEmZRkxqxhLOoSY1YwlnUpEYs4SxqnDVgCWdR82XUs4SzqMUdomUJZ1Gbm0/HEs6iVve1hiWcRe0eGTVLOItaPo1KlnAWtX3QVSzhLGp9hihYwlnU/nhKsoSzaIqTL8ESzqIp1AmWcBa1VydZwlnUWq1gCWdRW7WKJZxFLdVKlnAWtVOrWcJZ1EqtYQlnURu1jiWcRS3UWpZwFjWr9SzhLGpUA5ZwFjWpEUs4i5rUiKUuzKImNWLpDGbR+8fJqku/UI69xVkUZuBby39J76FedKqLTvX/7VSDYGlSDA3DHafrVCVamOxqpFKLik6t71QlOlWLWkwd/l5l/K5Ore1UJVqIdjfCV6qHerWuU5XoTH2hGsiAgFrTqUq0IOaqvNis+0it7lQlOlEPRoFiIEu+D9SaTlWi4UAK4m91Oqe+9gVp1bpOVaLRrEfCv1YOpDbb+dadqkQnl3Ew+2yKy6hU6zvVu5cxfIf8WKG/6FQXneqiU/3XneofAQYALu5FWBWQfGIAAAAASUVORK5CYII=); 
    -moz-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlQTFRFOEtSiJOYhpGWVWVrh5KXcX6EiZSZy9DSwMbJjZicu8HEuL/BuL/Cv8XIyM3QwcfJvMLFxMrMx8zPucDCwsjKtby/ipWarLS3xcrNtLu+t77BxsvO8fLzzdLUvcPG0dXXyc7Qw8nLs7q9qrK1i5aaxszOjJebr7a6rra5z9PWys/RzNHTqbG1nKWpjpmdj5mesbi8n6isl6GloKmtoquupK2wpa2x09fZp6+zk52h4+XmhI+U0tbYkpyhhpKXkJqflqCkkZug0NTXhZCVlJ6if4uQztPVRlhfnqerY3F3mKKmOUxTQFJZMkVNRFZd/leh////1NjaKj5G3sgFdgAAAx9JREFUeNrsmGtT2kAUhk9iuIuCoFUMKiK2WlF7b62tvVFra9s9+f8/piRAV5LddzcmM53psF/YQZ9H5iRZXl8K4OLhK9at88OfkCWD+vs3nXv/oBRkUl8+faI2b22UOJuadz88U5nXN445q5p3vzxPmjvFPc6u5t03L+Lm5eIK56HmT+9exszOGuej5qOPr++aW84256Xmo6sTaa46m5yfmr+e9WfbhtdkezWJ6aKaKCjV3D19MNnseD2eV0uao5eLUTo1dyuRu+612aAWYmluIOOfh1u9mh8fPmIuu6scV0uaI3ogKinVXDp4uOqW2UI9SqvmkvO2zlg9GTalVvfc9/tmtT+kIK266TX2nC3TQAZiEKRVbzpV5pXiumnWLPoadbQqSfW20wpf1pyOQX0jph/PVr3mLE//hLdsuEOG0+to+aCvFDtyMC3O8QyZG3HTq+anjt0YPbeRl/q4OH87c9vbyUdd2jiPf4GtuvU81OOjI/m1W/5czq6ODrzkqocHVTb19JhOrp3x8ZpNfdrXRb6G286mPtGmSa66P7Ca4foNF2bpEmZRkxqxhLOoSY1YwlnUpEYs4SxqnDVgCWdR82XUs4SzqMUdomUJZ1Gbm0/HEs6iVve1hiWcRe0eGTVLOItaPo1KlnAWtX3QVSzhLGp9hihYwlnU/nhKsoSzaIqTL8ESzqIp1AmWcBa1VydZwlnUWq1gCWdRW7WKJZxFLdVKlnAWtVOrWcJZ1EqtYQlnURu1jiWcRS3UWpZwFjWr9SzhLGpUA5ZwFjWpEUs4i5rUiKUuzKImNWLpDGbR+8fJqku/UI69xVkUZuBby39J76FedKqLTvX/7VSDYGlSDA3DHafrVCVamOxqpFKLik6t71QlOlWLWkwd/l5l/K5Ore1UJVqIdjfCV6qHerWuU5XoTH2hGsiAgFrTqUq0IOaqvNis+0it7lQlOlEPRoFiIEu+D9SaTlWi4UAK4m91Oqe+9gVp1bpOVaLRrEfCv1YOpDbb+dadqkQnl3Ew+2yKy6hU6zvVu5cxfIf8WKG/6FQXneqiU/3XneofAQYALu5FWBWQfGIAAAAASUVORK5CYII=); 
    -ms-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlQTFRFOEtSiJOYhpGWVWVrh5KXcX6EiZSZy9DSwMbJjZicu8HEuL/BuL/Cv8XIyM3QwcfJvMLFxMrMx8zPucDCwsjKtby/ipWarLS3xcrNtLu+t77BxsvO8fLzzdLUvcPG0dXXyc7Qw8nLs7q9qrK1i5aaxszOjJebr7a6rra5z9PWys/RzNHTqbG1nKWpjpmdj5mesbi8n6isl6GloKmtoquupK2wpa2x09fZp6+zk52h4+XmhI+U0tbYkpyhhpKXkJqflqCkkZug0NTXhZCVlJ6if4uQztPVRlhfnqerY3F3mKKmOUxTQFJZMkVNRFZd/leh////1NjaKj5G3sgFdgAAAx9JREFUeNrsmGtT2kAUhk9iuIuCoFUMKiK2WlF7b62tvVFra9s9+f8/piRAV5LddzcmM53psF/YQZ9H5iRZXl8K4OLhK9at88OfkCWD+vs3nXv/oBRkUl8+faI2b22UOJuadz88U5nXN445q5p3vzxPmjvFPc6u5t03L+Lm5eIK56HmT+9exszOGuej5qOPr++aW84256Xmo6sTaa46m5yfmr+e9WfbhtdkezWJ6aKaKCjV3D19MNnseD2eV0uao5eLUTo1dyuRu+612aAWYmluIOOfh1u9mh8fPmIuu6scV0uaI3ogKinVXDp4uOqW2UI9SqvmkvO2zlg9GTalVvfc9/tmtT+kIK266TX2nC3TQAZiEKRVbzpV5pXiumnWLPoadbQqSfW20wpf1pyOQX0jph/PVr3mLE//hLdsuEOG0+to+aCvFDtyMC3O8QyZG3HTq+anjt0YPbeRl/q4OH87c9vbyUdd2jiPf4GtuvU81OOjI/m1W/5czq6ODrzkqocHVTb19JhOrp3x8ZpNfdrXRb6G286mPtGmSa66P7Ca4foNF2bpEmZRkxqxhLOoSY1YwlnUpEYs4SxqnDVgCWdR82XUs4SzqMUdomUJZ1Gbm0/HEs6iVve1hiWcRe0eGTVLOItaPo1KlnAWtX3QVSzhLGp9hihYwlnU/nhKsoSzaIqTL8ESzqIp1AmWcBa1VydZwlnUWq1gCWdRW7WKJZxFLdVKlnAWtVOrWcJZ1EqtYQlnURu1jiWcRS3UWpZwFjWr9SzhLGpUA5ZwFjWpEUs4i5rUiKUuzKImNWLpDGbR+8fJqku/UI69xVkUZuBby39J76FedKqLTvX/7VSDYGlSDA3DHafrVCVamOxqpFKLik6t71QlOlWLWkwd/l5l/K5Ore1UJVqIdjfCV6qHerWuU5XoTH2hGsiAgFrTqUq0IOaqvNis+0it7lQlOlEPRoFiIEu+D9SaTlWi4UAK4m91Oqe+9gVp1bpOVaLRrEfCv1YOpDbb+dadqkQnl3Ew+2yKy6hU6zvVu5cxfIf8WKG/6FQXneqiU/3XneofAQYALu5FWBWQfGIAAAAASUVORK5CYII=); 
    -o-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlQTFRFOEtSiJOYhpGWVWVrh5KXcX6EiZSZy9DSwMbJjZicu8HEuL/BuL/Cv8XIyM3QwcfJvMLFxMrMx8zPucDCwsjKtby/ipWarLS3xcrNtLu+t77BxsvO8fLzzdLUvcPG0dXXyc7Qw8nLs7q9qrK1i5aaxszOjJebr7a6rra5z9PWys/RzNHTqbG1nKWpjpmdj5mesbi8n6isl6GloKmtoquupK2wpa2x09fZp6+zk52h4+XmhI+U0tbYkpyhhpKXkJqflqCkkZug0NTXhZCVlJ6if4uQztPVRlhfnqerY3F3mKKmOUxTQFJZMkVNRFZd/leh////1NjaKj5G3sgFdgAAAx9JREFUeNrsmGtT2kAUhk9iuIuCoFUMKiK2WlF7b62tvVFra9s9+f8/piRAV5LddzcmM53psF/YQZ9H5iRZXl8K4OLhK9at88OfkCWD+vs3nXv/oBRkUl8+faI2b22UOJuadz88U5nXN445q5p3vzxPmjvFPc6u5t03L+Lm5eIK56HmT+9exszOGuej5qOPr++aW84256Xmo6sTaa46m5yfmr+e9WfbhtdkezWJ6aKaKCjV3D19MNnseD2eV0uao5eLUTo1dyuRu+612aAWYmluIOOfh1u9mh8fPmIuu6scV0uaI3ogKinVXDp4uOqW2UI9SqvmkvO2zlg9GTalVvfc9/tmtT+kIK266TX2nC3TQAZiEKRVbzpV5pXiumnWLPoadbQqSfW20wpf1pyOQX0jph/PVr3mLE//hLdsuEOG0+to+aCvFDtyMC3O8QyZG3HTq+anjt0YPbeRl/q4OH87c9vbyUdd2jiPf4GtuvU81OOjI/m1W/5czq6ODrzkqocHVTb19JhOrp3x8ZpNfdrXRb6G286mPtGmSa66P7Ca4foNF2bpEmZRkxqxhLOoSY1YwlnUpEYs4SxqnDVgCWdR82XUs4SzqMUdomUJZ1Gbm0/HEs6iVve1hiWcRe0eGTVLOItaPo1KlnAWtX3QVSzhLGp9hihYwlnU/nhKsoSzaIqTL8ESzqIp1AmWcBa1VydZwlnUWq1gCWdRW7WKJZxFLdVKlnAWtVOrWcJZ1EqtYQlnURu1jiWcRS3UWpZwFjWr9SzhLGpUA5ZwFjWpEUs4i5rUiKUuzKImNWLpDGbR+8fJqku/UI69xVkUZuBby39J76FedKqLTvX/7VSDYGlSDA3DHafrVCVamOxqpFKLik6t71QlOlWLWkwd/l5l/K5Ore1UJVqIdjfCV6qHerWuU5XoTH2hGsiAgFrTqUq0IOaqvNis+0it7lQlOlEPRoFiIEu+D9SaTlWi4UAK4m91Oqe+9gVp1bpOVaLRrEfCv1YOpDbb+dadqkQnl3Ew+2yKy6hU6zvVu5cxfIf8WKG/6FQXneqiU/3XneofAQYALu5FWBWQfGIAAAAASUVORK5CYII=); 
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlQTFRFOEtSiJOYhpGWVWVrh5KXcX6EiZSZy9DSwMbJjZicu8HEuL/BuL/Cv8XIyM3QwcfJvMLFxMrMx8zPucDCwsjKtby/ipWarLS3xcrNtLu+t77BxsvO8fLzzdLUvcPG0dXXyc7Qw8nLs7q9qrK1i5aaxszOjJebr7a6rra5z9PWys/RzNHTqbG1nKWpjpmdj5mesbi8n6isl6GloKmtoquupK2wpa2x09fZp6+zk52h4+XmhI+U0tbYkpyhhpKXkJqflqCkkZug0NTXhZCVlJ6if4uQztPVRlhfnqerY3F3mKKmOUxTQFJZMkVNRFZd/leh////1NjaKj5G3sgFdgAAAx9JREFUeNrsmGtT2kAUhk9iuIuCoFUMKiK2WlF7b62tvVFra9s9+f8/piRAV5LddzcmM53psF/YQZ9H5iRZXl8K4OLhK9at88OfkCWD+vs3nXv/oBRkUl8+faI2b22UOJuadz88U5nXN445q5p3vzxPmjvFPc6u5t03L+Lm5eIK56HmT+9exszOGuej5qOPr++aW84256Xmo6sTaa46m5yfmr+e9WfbhtdkezWJ6aKaKCjV3D19MNnseD2eV0uao5eLUTo1dyuRu+612aAWYmluIOOfh1u9mh8fPmIuu6scV0uaI3ogKinVXDp4uOqW2UI9SqvmkvO2zlg9GTalVvfc9/tmtT+kIK266TX2nC3TQAZiEKRVbzpV5pXiumnWLPoadbQqSfW20wpf1pyOQX0jph/PVr3mLE//hLdsuEOG0+to+aCvFDtyMC3O8QyZG3HTq+anjt0YPbeRl/q4OH87c9vbyUdd2jiPf4GtuvU81OOjI/m1W/5czq6ODrzkqocHVTb19JhOrp3x8ZpNfdrXRb6G286mPtGmSa66P7Ca4foNF2bpEmZRkxqxhLOoSY1YwlnUpEYs4SxqnDVgCWdR82XUs4SzqMUdomUJZ1Gbm0/HEs6iVve1hiWcRe0eGTVLOItaPo1KlnAWtX3QVSzhLGp9hihYwlnU/nhKsoSzaIqTL8ESzqIp1AmWcBa1VydZwlnUWq1gCWdRW7WKJZxFLdVKlnAWtVOrWcJZ1EqtYQlnURu1jiWcRS3UWpZwFjWr9SzhLGpUA5ZwFjWpEUs4i5rUiKUuzKImNWLpDGbR+8fJqku/UI69xVkUZuBby39J76FedKqLTvX/7VSDYGlSDA3DHafrVCVamOxqpFKLik6t71QlOlWLWkwd/l5l/K5Ore1UJVqIdjfCV6qHerWuU5XoTH2hGsiAgFrTqUq0IOaqvNis+0it7lQlOlEPRoFiIEu+D9SaTlWi4UAK4m91Oqe+9gVp1bpOVaLRrEfCv1YOpDbb+dadqkQnl3Ew+2yKy6hU6zvVu5cxfIf8WKG/6FQXneqiU/3XneofAQYALu5FWBWQfGIAAAAASUVORK5CYII=); 

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.