CSS border image is wider than the div - html

Question

I am adding an image border in bottom of my div like this :
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;
}
This worked but in action border-image is wider than my div.
Problem pic:
How do I fix this problem?
DEMO here

Answer 1

It seems like browsers assign a default width to borders when border-image is used (but the borders on the other sides are invisible because the border-image-width is 0px). To avoid the borders from looking like they are overflowing the div, manually set the border widths on all other sides to 0px.
border-width: 4px 0px 0px 0px;
The behavior is seen in Chrome (upto v48.0.2535.0 dev-m), IE (Edge), Opera and Safari. The border image doesn't extend beyond the div in latest Firefox (v41.0.1) IE (v11),
.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;
border-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;
}
<div class="view">
<div class="shadow_overlay"></div>
</div>
In the below snippet you can see how it looks as though all other sides have a 3px border. There is no clear explanation either in the Web or in the specs about whose behavior is correct (Chrome, Edge or FF, IE11).
.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;
}
.view#two{
border-width: 4px 3px 3px 3px;
}
.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;
}
<div class="view">
<div class="shadow_overlay"></div>
</div>
<div class="view" id="two">
<div class="shadow_overlay"></div>
</div>
The W3C Specs also say the following about border-image properties but in FF and IE11 the border-image is not shown when only border-width is provided and border-image-width is avoided.
The border-image properties do not affect layout: layout of the box, its content, and surrounding content is based on the ‘border-width’ and ‘border-style’ properties only.
So, it seems like the behavior of border-image is still not standardized. I am leaning towards what is observed in Chrome, Edge because Microsoft, for some reason, seems to have changed the behavior from IE11 and so there must be a good reason for it.