I am trying to add a gradient as a bottom border to my site's header using border-image CSS. The gradient needs to fill up 100% of the width across.
I can get the gradient to fill up the majority of the bottom border using border-image-width and border-image-slice, but for some reason it excludes the two bottom corners as white space. How can I get the gradient to span ALL of the bottom in one flow?
I have tried removing border-image-slice altogether and that fills in the two bottom corners but omits the rest of the bottom border.
{
border-image-width: 0 0 10px 0 auto;
-moz-border-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 0 0 1 0;
}
It seems that setting both border-image-width and border-image-slice to "0 0 X 0" should only show the bottom. Good so far. However, this also removes the two bottom corners so there are a couple pixels of white space preventing the gradient to flow from one edge of the site to the other. Strangely, when I remove the bottom-image-slice altogether, only the two bottom corners show up with the gradient. I need the gradient to start with the bottom left corner and go all the way across the bottom through the bottom right corner.
Consider a background that will cover a transparent border and it will be easier to handle:
.box {
height: 50px;
border-bottom:10px solid transparent;
background:
linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) bottom/100% 10px border-box no-repeat,
red;
}
<div class="box"></div>
The issue with slices is that if you want for example the bottom/left corner you also need the bottom and left edge, not only the bottom edge.
Related to better understand the logic behind border-image-slice
: border-image-slice for gradient border image