Gradient color in bottom border

Question

How can I get a gradient colors in the bottom border of any tag? Like in this code I have to put under "Login" from yellow to darkpink.
https://code.sololearn.com/WewzKEB0iJKl/?ref=app

Answer 1

The following works for me in Edge and Chrome on my laptop:

.login form input {
margin-bottom:30px;
width:300px;
height:30px;
border-width:0px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-image-slice: 1;
border-image-source: linear-gradient(to right, #d91acc, #5288ff);
}

I just replaced your CSS for the .login form input elements with the above.

I made the line 2px thick instead of your 1px just to make the gradient more obvious. If you want it 1px wide but find the gradient is too subtle, I guess you could make the 2 colours more different.

The above changes were adapted from the CSS used in the following article:
https://css-tricks.com/animating-a-css-gradient-border/

Answer 2

https://code.sololearn.com/W8q3WQ3ngefp/?ref=app

Answer 3

Thx, it is working

Answer 4

يوسف الجز

Answer 5

سعيد محمد