border-image #6

A comparison of an element with border-image-outset not set (default 0) and another with border-image-outset set to 1.

HTML

<div>border-image-outset not set (default is 0)</div>
<div class="image-outset">border-image-outset set to 1</div>

CSS

.image-outset {
    border-image-outset: 1;
}
div {
    border: 30px solid #d4d8da; /* Fallback - shorthand for border-width, border-style, border-color */
    -webkit-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
       -moz-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
        -ms-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
         -o-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
            border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
    
    /* General Styles */
    border-radius:50%;
    font-weight: bold;
    height: 200px;
    line-height: 200px;
    margin: 0 auto 20px;
    padding: 10px;
    text-align: center;
    width: 300px;
}