<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.