Search code examples
cssbordergradientlinear-gradients

HR gradient is not taking effect

I can't tell my HR gradient is not taking effect or even displaying.

hr.green {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px dashed;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
    border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) !important;
    border-image-slice: 1;

}


body {
background-color:black;

}
<h1>
TEST
</h1>
<hr class="green">

Did I have a typo somewhere?

I was hoping to see something like this.

enter image description here

Solution

  • add the slice inside the border-image because it will also set the border-image-width which is missing here:

    hr.green {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px dashed;
  border-left: 0;
  border-bottom: 0;
  border-right: 0;
  border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) 1;
}

body {
  background-color: black;
}
    <h1>
  TEST
</h1>
<hr class="green">