csslinear-gradientsborder-image

How to set multi-color border using border-image and linear-gradient?

Was trying to make a multi-color bottom border like in below image, but failed.

multi color bottom border

Tried to use border-image: linear-gradient(), but didn't manage. it only gets one of the colors: #707070.

only got one color bottom border

a {
  color: #707070 !important;
  font-size: 20px;
  text-decoration: none;
  margin-right: 50px;
  border-bottom: 5px solid;
  border-image: linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 5;
}
<div id="nav">
  <a href="/">HOME</a>
  <a href="/projects">PROJECTS</a>
  <a href="/resume">RESUME</a>
</div>

Solution

  • The issue is that percentages are relative to the element not the border which will make the 20% bigger than 5px.

    You need to consider pixel values. You also need to start from the bottom because the top reference is also the top of the element:

    a {
  color: #707070 !important;
  font-size: 20px;
  text-decoration: none;
  margin-right: 50px;
  border-bottom: 5px solid;
  border-image: 
    linear-gradient(to top, #707070 1px, #a4c0e9 1px, #a4c0e9 4px, #707070 4px) 5;
}
    <a>A link element</a>

    Or use it as background and it will be easier to handle:

    a {
  color: #707070 !important;
  font-size: 20px;
  text-decoration: none;
  margin-right: 50px;
  border-bottom: 5px solid transparent;
  background: 
    linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) bottom/100% 5px border-box no-repeat;
}
    <a>A link element</a>

    Related: border-image-slice for gradient border image

    Here is an example to better illustrate the issue you were having:

    .box {
  width:100px;
  height:100px;
  display:inline-block;
  border-bottom:10px solid rgba(0,0,0,0.2);

}
    <div class="box" style="background:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) border-box">
</div>

<div class="box" style="border-image:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 10 fill">
</div>

<div class="box" style="border-image:linear-gradient(to bottom, #707070 20%, #a4c0e9 20%, #a4c0e9 80%, #707070 80%) 10 ">
</div>

    In this example, the first box show the gradient we will be using. In the second one, we are applying it to the border using fill to also color the middle area and in the last one we are coloring only the border-bottom