CSS边框图片比div宽

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.