How to capture two bottom corners in border-image-slice?

Question

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.

Temani Afif · Accepted Answer · 2019-07-21T00:36:42.817

1

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

edited Jul 21 '19 at 00:36

answered Jul 21 '19 at 00:08

Temani Afif

245,468
26
309
415

Thank you! This worked very well. In the code I was using before, there was some consideration for -moz and -webkit. Is there anything I should be adding to this code to make it more universal to different browsers? Thanks again! – wmwm Jul 21 '19 at 04:33
@wmwm no, you no more need the vendor prefixes for gradient. The code I made is enough and will work in all the browsers – Temani Afif Jul 21 '19 at 07:58

How to capture two bottom corners in border-image-slice?

1 Answers1