Using CSS alone, how can you have a Border-bottom gradient from Right to Left?

Question

I would like to know if it is possible using CSS alone to be able to do a border-bottom with gradient going from right to left and not from the center outwards.

In my search for the answer, I have found a JSFiddle link which shows that it is possible to have a border gradient going from top to bottom which is transparent;

Method One /* Using only background gradients */

.one { 
    width: 400px;
    padding: 20px 25px;
    border-top: 5px solid #000;
    margin: 40px auto;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image:
        -moz-linear-gradient(#000, transparent),
        -moz-linear-gradient(#000, transparent)
    ;
    background-image:
        -o-linear-gradient(#000, transparent),
        -o-linear-gradient(#000, transparent)
    ;
    background-image: 
        linear-gradient(#000, transparent),
        linear-gradient(#000, transparent)
    ;
    -moz-background-size:5px 100%;
    background-size:5px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

Method 2 /* Using pseudo-elements and background gradients */

.two {
    position: relative;
    width: 400px;
    padding: 20px;
    border: 5px solid transparent;
    border-top-color: #000;
    margin: 40px auto;
}

.two:before,
.two:after {
    content: "";
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    width: 5px;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image: -moz-linear-gradient(#000, transparent);
    background-image: -o-linear-gradient(#000, transparent);
    background-image: linear-gradient(#000, transparent);
}

.two:after {
    left: auto;
    right: -5px;
}

I do not understand how the above CSS is letting the page know the direction and I assume it is just a little, simple, under-looked edit, of which I cannot seem to find at this moment in time and therefore I am making this question to ask for some help.

I would also like to know if this will work if the border is dashed or dotted?

Thank you for any help and/or advice in advanced.

Best Regards, Tim

Answer 1

NOTE - Edited the CSS to have the gradient span across the width of the element, not just the border width.

This is what I've come up with, which is more or less what h3n is suggesting with more vendor-specific properties filled-in:

border-right: 5px solid #000; /* Don't forget to modify to the right border. */
background-image: 
    -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: 
    -webkit-linear-gradient(180deg, #000, transparent),
    -webkit-linear-gradient(180deg, #000, transparent)
;
background-image: 
    -moz-linear-gradient(180deg, #000, transparent),
    -moz-linear-gradient(180deg, #000, transparent)
;
background-image:
    -o-linear-gradient(180deg, #000, transparent),
    -o-linear-gradient(180deg, #000, transparent)
;
background-image: 
    linear-gradient(90deg, #000, transparent),
    linear-gradient(90deg, #000, transparent)
;
-moz-background-size: 100% 5px; /* This get flipped. */
background-size: 100% 5px; /* This get flipped. */
background-position: 0 0, 0 100%; /* The last argument gets flipped. */
background-repeat: no-repeat;

http://jsfiddle.net/vqnk9/1548/

MDN has a reasonable tutorial on how to handle this cross-browser, as well.

Now, if you look closely, you may notice that the non-vendor background-image uses 90deg instead of 180deg. My original thought was -90deg, so of course that makes sense to me somehow (?), but as to why they are different, here is the W3 spec (see the last quote for the reasoning behind this difference):

4.1.1. linear-gradient() syntax

The linear gradient syntax is:

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]? 
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

The first argument to the function specifies the gradient line, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to ‘to bottom’.

The gradient line's direction may be specified in two ways:

using angles

For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.

using keywords

If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.

If the argument instead specifies a corner of the box such as ‘to top left’, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).

Starting from the center of the gradient box, extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient box in the specified direction. The starting point is determined identically, but in the opposite direction.

And from MDN, some administrivia on why the degrees differ (blame Apple?):

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an <angle> defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

Answer 2

at least for webkit this sets the angle so its from right to left: -webkit-linear-gradient(180deg, black, white)