Right side border gradient with only new webkit gradient syntax, also which browsers support this, and how to do it in them?

Question

Any other questions related to this have answers giving the OLD webkit syntax, not the new syntax, or they don’t explain how to apply a border gradient to only one side.

Which browsers support gradient borders through CSS without using images?

I have an example in JsFiddle below, it shows that the gradient only applies to the right border, how would I make this cross browser compatible with all 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 ago, I think I would like to use the new syntax, but I fail every time I try. I don’t understand what the syntax says that the gradient ONLY applies to the right side, I tried to adjust the numbers, but I just don’t understand what this does. Thanks a lot.

http://jsfiddle.net/nicktheandroid/MNax7/1/

---

In addition, I have another example below, it uses the new CSS gradient syntax that all browsers use, but the gradient applies to all borders, I wanted it to apply to ONLY the right border, as in the example above.

http://jsfiddle.net/nicktheandroid/b875w/2/

Answer 1

You need values ​​related to the thickness of the border of your code:

0 100% 0 0/0 15px 0 0 stretch; 

The first four numbers are gradient activations for the four borders (top, right, bottom, left), so the right border is set to 100%, and the rest are deactivated.

The four numbers after / are the width of the borders, obviously the top, bottom and left are set to 0 widths and 15 pixels to the right.

The stretch option tells the gradient to stretch the entire length of the border, the other option is round, but it is used more with the actual images (image.jpg) to decide whether to repeat the image or stretch it in length, I don’t know if more options are available.

The following is an updated demo using the new syntax with only the right frame activated.

Answer 2

Set image-slice:1 to your div' css properties.