Search code examples
htmlcsstags

<hr> tag of height 1px or 0.1rem rendering differently

hr tag of 0.1rem (1px) height have different thickness. This could be fixed by using border-top property instead of height. But i need to implement a gradient color to tag which is possible only through background-image so i have to use height i guess. https://codepen.io/TitaniumGT/pen/JjpLpGj
The problem has been duplicated in the codepen but the border-top fix doesn't work here and creates same issue which occurs when height is used. It seems to happen at lines of even nos.

 hr {
  border: 0;
}
.line {
  height: 0.1rem;
  // border-top: 0.1rem solid;
  background-color: $color-primary-dark;
  margin: 1rem 0;
}

Can somebody help me with this. If no solution is there any way to add gradients to borders?

Solution

  • this work for me

    hr{
border-width: 5px; 
border-image: linear-gradient(to right,white,black,white) 1;
}

    enter image description here

    Note: 1 in border-image stretched linear-gradient to all width of line