Border image with linear gradient

An example using a gradient for a border image (webkit only)

by LuckyCat

HTML

<div class='bordered'>1</div>

SCSS

div {
    height: 100px; width: 100px;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
    margin: 10px auto;
    background-clip: padding-box;
}
.bordered {
    border: 20px double #465e8b;
    border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6b84d1), to(#374782)) 20 stretch;
    border-image: -webkit-linear-gradient(#6b84d1,#374782) 20 stretch;
}