title: Using CSS alone, how can you have a Border-bottom gradient from Right to Left?
body: <p>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.</p>
  
  <p>In my search for the answer, I have found a <a href="http://jsfiddle.net/necolas/vqnk9/" rel="nofollow">JSFiddle</a> link which shows that it is possible to have a border gradient going from top to bottom which is transparent;</p>
  
  <p><strong>Method One</strong>
      /* Using only background gradients */</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>Method 2</strong>
      /* Using pseudo-elements and background gradients */</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I would also like to know if this will work if the border is dashed or dotted?</p>
  
  <p>Thank you for any help and/or advice in advanced.</p>
  
  <p>Best Regards,
  Tim</p>