[Solved] Gradient Border-Bottom Help Needed!

[johnkelton]

Hello, I want to make my border bottom a gradient. For paste 3 hours I have tried to apply many tutorials but none gives me exactly what I want. Since I am a beginner, I am unable to solve this problem. Any help is much appreciated.
I would like to apply the following style to “border-bottom”

http://jsfiddle.net/joshnh/HdwKA/
Thanks in advance!

[Paulie_D]

Borders (as far as I know) don’t take gradients as background becuase they are colors.

There is no border-background property.

You can use border-image as shown in this demo by Chris Coyier

https://css-tricks.com/examples/GradientBorder/

What are you trying to do? Do you have an image of the expected result?

What element are you trying to apply this border too?

[johnkelton]

Yeah thats what I found too. I tried following the examples but was unable to make it work.
The link http://jsfiddle.net/joshnh/HdwKA/ shows what I want.

Can someone help me in applying tutorial https://css-tricks.com/examples/GradientBorder/

Thanks

[Paulie_D]

What element are you trying to apply this border to?

Personally, I would use a pseudo-element

http://codepen.io/Paulie-D/pen/zxmNLM

[johnkelton]

”

<h1>Title of the blog</h1>

”

I am trying to apply it to <h1></h1>
Thanks

[johnkelton]

I cant do any changes to HTML, I only have access to style sheet.

[Paulie_D]

Updated my Codepen…see ^^^

[johnkelton]

You are awesome :-))) Thanks

Best resource to learn CSS in your opinion?

Thanks again

[Paulie_D]

Best resource to learn CSS in your opinion?

Practice…and google. :)

[Author]

Posts