CODEWITHSUNDEEP
htmlcsslinear-gradients
0Zef0
0Zef0

Reputation: 77

border-color with linear-gradient

<hr class="instagram">

I am trying to use Linear Gradient with <hr> tag for coloring the line. Is it a valid action? If not how can I achieve that? 

.instagram {
  color: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* Not Working */
  border-width: medium;
  border-style: solid;
  margin-block-start: 0px;
  margin-block-end: 0px;
  border-radius: 10px;
  border-radius: 10px 10px 0px 0px;
}

Upvotes: 0

Views: 3378

Answers (4)

Kosh
Kosh

Reputation: 18423

One more way to do it:

.instagram {
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)) border-box;
  border: medium solid transparent;
  border-radius: 10px 10px 0px 0px;
  margin: 0;
}
<hr class="instagram">

Upvotes: 0

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 1128

Try to add background instead of color and a height : 

 background: linear-gradient(to right, red, yellow);
 height: 5px;

As recommanded on this post How do you give a <hr> a gradient color?

Upvotes: 2

Sylwia Vargas
Sylwia Vargas

Reputation: 1

I see you don't have any height on your hr — and perhaps change color to background. I also added different browser support. Try this:

.instagram {
  height: 1px;
  border-radius: 10px 10px 0px 0px;
background: hsl(37, 97%, 70%); /* not all browsers support gradients */ 
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)) /* standard syntax */ 
  background: -webkit-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /*For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* For Opera 11.1 to 12.0 */ 
  background: -moz-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* For Firefox 3.6 to 15 */ 
}

Upvotes: 0

Henfs
Henfs

Reputation: 5411

Instead of border, use height and background-image for the linear gradient.

.instagram {
  background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
  border-radius: 10px 10px 0px 0px;
  height: 5px;
}
<hr class="instagram">

Upvotes: 2

Related Questions