Any other questions relating to this either have answers giving the OLD webkit syntax, not the new syntax, or they don’t explain how to apply the border-gradient to ONLY one side.
Which browsers support gradient borders through CSS without having to use images?
I have an example at the JsFiddle below, it shows a gradient being applied to ONLY the right border, how would I make this cross browser compatible to all the browsers that currently support CSS border gradients? I believe the Gradient syntax in my example is the old syntax used by webkit, they updated the syntax a year or so ago I think, I would like to use the new syntax but i fail with every attempt. I don’t understand what in the syntax is telling the gradient to ONLY be applied to the right side, i tried adjusting numbers but I just don’t understand what’s doing it. thank you so much.
http://jsfiddle.net/nicktheandroid/MNax7/1/
Also, I have another example below, it uses the new CSS gradient syntax that all the browsers use, but the gradient is applied to all the borders, I wanted it applied to ONLY the right border, like the example above does.
You need the values pertaining to border thickness in your code:
The first four numbers are the activations of the gradient for the four borders (top, right, bottom, left) so the right border is set to 100% while the others are deactivated.
The four numbers after the / are the width of the borders, obviously top, bottom and left are set to 0 width, and right is at 15px.
The stretch option tells the gradient to stretch the entire way of the border length, the other option is round but this is used more with actual images (image.jpg) to decide whether to repeat the image or stretch it over the length. I don’t know if more options are available yet..
Here is an updated demo, using your new syntax with only the right border activated.