<!-- Legacy code used as example code on http://css-plus.com -->

<div class="border">
    <p>This is a very basic <code>border-image</code> example.</p>
</div>
.border {
    border-style: solid;
    border-width: 25px;
    border-image-slice: 25;
    border-image-repeat: repeat;
    
    /* Using base64 images to not rely on external dependencie for the codepen */
    -webkit-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQjY0MzhDQ0UyNjhFMTExODQyQjg0N0YwRTQxRjgwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFREIyQkUzNDZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFREIyQkUzMzZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjRDODJCMDc2QUUxMTFBRTU2QUMwNDZBMTBDQzI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBCNjQzOENDRTI2OEUxMTE4NDJCODQ3RjBFNDFGODA2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sxj/ZQAAAR1JREFUeNrsm70NwjAUhGOUPiyBkGAH6GAcGgbIAGkyDiVDpEAsARMYhEQTichE/n3vOylNqvjLvdNJts1md7CVYi0q5QIAAJSr/vHeCF2vxQGODvhouF5ELHK7P84D8FXb9cUuvj2fCMHZIzD6+6U1RqcgpwcAAACEYPCgSdHwcEAkBziVjWAlx0NBq31+0HC7x6u36xUhmM0IjP7+4/00qRseDkgIoNEOgCaoMgQDBZfFAUIc8Fd5iVmoCEEAAAAAAAAAAABAE4yhmA0PB2TmAEsGAEAPgKdKAL42KiSE4JIM0OqAEsfAz+5wwcfoGAGpDQ8HAAAAfgCkOv+TYwgaRkCrAySPwSSAqZsWjIBwB6i5TksPAAAAdOslwAD+UycUN7TE+QAAAABJRU5ErkJggg==);
    -moz-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQjY0MzhDQ0UyNjhFMTExODQyQjg0N0YwRTQxRjgwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFREIyQkUzNDZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFREIyQkUzMzZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjRDODJCMDc2QUUxMTFBRTU2QUMwNDZBMTBDQzI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBCNjQzOENDRTI2OEUxMTE4NDJCODQ3RjBFNDFGODA2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sxj/ZQAAAR1JREFUeNrsm70NwjAUhGOUPiyBkGAH6GAcGgbIAGkyDiVDpEAsARMYhEQTichE/n3vOylNqvjLvdNJts1md7CVYi0q5QIAAJSr/vHeCF2vxQGODvhouF5ELHK7P84D8FXb9cUuvj2fCMHZIzD6+6U1RqcgpwcAAACEYPCgSdHwcEAkBziVjWAlx0NBq31+0HC7x6u36xUhmM0IjP7+4/00qRseDkgIoNEOgCaoMgQDBZfFAUIc8Fd5iVmoCEEAAAAAAAAAAABAE4yhmA0PB2TmAEsGAEAPgKdKAL42KiSE4JIM0OqAEsfAz+5wwcfoGAGpDQ8HAAAAfgCkOv+TYwgaRkCrAySPwSSAqZsWjIBwB6i5TksPAAAAdOslwAD+UycUN7TE+QAAAABJRU5ErkJggg==);
    -ms-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQjY0MzhDQ0UyNjhFMTExODQyQjg0N0YwRTQxRjgwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFREIyQkUzNDZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFREIyQkUzMzZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjRDODJCMDc2QUUxMTFBRTU2QUMwNDZBMTBDQzI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBCNjQzOENDRTI2OEUxMTE4NDJCODQ3RjBFNDFGODA2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sxj/ZQAAAR1JREFUeNrsm70NwjAUhGOUPiyBkGAH6GAcGgbIAGkyDiVDpEAsARMYhEQTichE/n3vOylNqvjLvdNJts1md7CVYi0q5QIAAJSr/vHeCF2vxQGODvhouF5ELHK7P84D8FXb9cUuvj2fCMHZIzD6+6U1RqcgpwcAAACEYPCgSdHwcEAkBziVjWAlx0NBq31+0HC7x6u36xUhmM0IjP7+4/00qRseDkgIoNEOgCaoMgQDBZfFAUIc8Fd5iVmoCEEAAAAAAAAAAABAE4yhmA0PB2TmAEsGAEAPgKdKAL42KiSE4JIM0OqAEsfAz+5wwcfoGAGpDQ8HAAAAfgCkOv+TYwgaRkCrAySPwSSAqZsWjIBwB6i5TksPAAAAdOslwAD+UycUN7TE+QAAAABJRU5ErkJggg==);
    -o-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQjY0MzhDQ0UyNjhFMTExODQyQjg0N0YwRTQxRjgwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFREIyQkUzNDZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFREIyQkUzMzZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjRDODJCMDc2QUUxMTFBRTU2QUMwNDZBMTBDQzI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBCNjQzOENDRTI2OEUxMTE4NDJCODQ3RjBFNDFGODA2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sxj/ZQAAAR1JREFUeNrsm70NwjAUhGOUPiyBkGAH6GAcGgbIAGkyDiVDpEAsARMYhEQTichE/n3vOylNqvjLvdNJts1md7CVYi0q5QIAAJSr/vHeCF2vxQGODvhouF5ELHK7P84D8FXb9cUuvj2fCMHZIzD6+6U1RqcgpwcAAACEYPCgSdHwcEAkBziVjWAlx0NBq31+0HC7x6u36xUhmM0IjP7+4/00qRseDkgIoNEOgCaoMgQDBZfFAUIc8Fd5iVmoCEEAAAAAAAAAAABAE4yhmA0PB2TmAEsGAEAPgKdKAL42KiSE4JIM0OqAEsfAz+5wwcfoGAGpDQ8HAAAAfgCkOv+TYwgaRkCrAySPwSSAqZsWjIBwB6i5TksPAAAAdOslwAD+UycUN7TE+QAAAABJRU5ErkJggg==);
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQjY0MzhDQ0UyNjhFMTExODQyQjg0N0YwRTQxRjgwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFREIyQkUzNDZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFREIyQkUzMzZBMEQxMUUxODA3RkREQzI2MjEwM0Q2QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjRDODJCMDc2QUUxMTFBRTU2QUMwNDZBMTBDQzI0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBCNjQzOENDRTI2OEUxMTE4NDJCODQ3RjBFNDFGODA2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sxj/ZQAAAR1JREFUeNrsm70NwjAUhGOUPiyBkGAH6GAcGgbIAGkyDiVDpEAsARMYhEQTichE/n3vOylNqvjLvdNJts1md7CVYi0q5QIAAJSr/vHeCF2vxQGODvhouF5ELHK7P84D8FXb9cUuvj2fCMHZIzD6+6U1RqcgpwcAAACEYPCgSdHwcEAkBziVjWAlx0NBq31+0HC7x6u36xUhmM0IjP7+4/00qRseDkgIoNEOgCaoMgQDBZfFAUIc8Fd5iVmoCEEAAAAAAAAAAABAE4yhmA0PB2TmAEsGAEAPgKdKAL42KiSE4JIM0OqAEsfAz+5wwcfoGAGpDQ8HAAAAfgCkOv+TYwgaRkCrAySPwSSAqZsWjIBwB6i5TksPAAAAdOslwAD+UycUN7TE+QAAAABJRU5ErkJggg==);
}

/* IE fallback */
.no-borderimage .border {
    border: 5px solid #2a3e46;
}
import * as modernizr from "https://cdn.skypack.dev/modernizr@3.12.0";
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.