<!-- Legacy code used as example code on http://css-plus.com/a-border-image-investigation -->
<div id="border-stretch">Example of how a border can be stretched to create a Gradient</div>
#border-stretch {
    border: 10px solid #2a3e46; /* Fallback - shorthand for border-width, border-style, border-color */
    border-image-slice: 10;
    border-image-repeat: stretch;
    
    -webkit-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHZJREFUeNpi1LJz+89ABAj19QLj1Zu3YdAgTAxgYqAjGLVs1LJRy2gPGOu7JxBbgjDikgOWIESZwXjlxq3/xDoMRGirq6IIXr15G0QRZQYLseUaqBzE4zOGUZ8NXp9BDSfLZ0RbBnL9aOU5atmoZaOWoQCAAAMA7oRK++m1zVUAAAAASUVORK5CYII=);
    -moz-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHZJREFUeNpi1LJz+89ABAj19QLj1Zu3YdAgTAxgYqAjGLVs1LJRy2gPGOu7JxBbgjDikgOWIESZwXjlxq3/xDoMRGirq6IIXr15G0QRZQYLseUaqBzE4zOGUZ8NXp9BDSfLZ0RbBnL9aOU5atmoZaOWoQCAAAMA7oRK++m1zVUAAAAASUVORK5CYII=);
    -ms-border-imag-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHZJREFUeNpi1LJz+89ABAj19QLj1Zu3YdAgTAxgYqAjGLVs1LJRy2gPGOu7JxBbgjDikgOWIESZwXjlxq3/xDoMRGirq6IIXr15G0QRZQYLseUaqBzE4zOGUZ8NXp9BDSfLZ0RbBnL9aOU5atmoZaOWoQCAAAMA7oRK++m1zVUAAAAASUVORK5CYII=);
    -o-border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHZJREFUeNpi1LJz+89ABAj19QLj1Zu3YdAgTAxgYqAjGLVs1LJRy2gPGOu7JxBbgjDikgOWIESZwXjlxq3/xDoMRGirq6IIXr15G0QRZQYLseUaqBzE4zOGUZ8NXp9BDSfLZ0RbBnL9aOU5atmoZaOWoQCAAAMA7oRK++m1zVUAAAAASUVORK5CYII=);
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHZJREFUeNpi1LJz+89ABAj19QLj1Zu3YdAgTAxgYqAjGLVs1LJRy2gPGOu7JxBbgjDikgOWIESZwXjlxq3/xDoMRGirq6IIXr15G0QRZQYLseUaqBzE4zOGUZ8NXp9BDSfLZ0RbBnL9aOU5atmoZaOWoQCAAAMA7oRK++m1zVUAAAAASUVORK5CYII=);
    
    padding: 10px;
    text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.