html - CSS ボーダー画像が div よりも広い

Question

次のように、div の下部に画像の境界線を追加しています。

HTML:

<div class="view">
    <div class="shadow_overlay"></div>
</div>

CSS:

.view {
    text-align: center;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    width: 160px;
    height: 190px;
    border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
    border-image-slice: 1;
    border-image-width: 4px 0px 0px 0px;
}
.shadow_overlay {
    background: url('http://i.imgur.com/MrVzqyp.png') 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-left:auto;
    margin-right:auto;
    width:160px;
    height:190px;
}

これはうまくいきましたが、実際にborder-imageは私のdiv.

問題の写真:

この問題を解決するにはどうすればよいですか?

デモはこちら