border-image #2

Example of the difference between elements with the same border-image applied, but with a different border-width.

by cssplus

HTML

<div class="one-to-one">Example of 1:1 ratio</div>
<div class="three-to-one">Example of 3:1 ratio</div>

CSS

div {
    border-style: solid; /* fallback */
    border-color: #d4d8da; /* fallback */
    -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; 
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
}

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

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