title: Create linear gradient border for top and bottom edges only?
body: <p>With the code below, I can only generate a linear-gradient <code>border-image</code> for the element's bottom edge. How can I modify the code to make one for its top as well?</p>
  
  <pre><code>div {
      /* gradient shining border */
      border-style: solid;
      border-width: 3px;
      -webkit-border-image: -webkit-linear-gradient(
          left,
          rgba(0,0,0,1) 1%,
          rgba(0,255,255,1) 50%,
          rgba(0,0,0,1) 100%
      ) 0 0 100% 0/0 0 3px 0 stretch;
      -moz-border-image: -moz-linear-gradient(
          left,
          rgba(0,0,0,1) 1%,
          rgba(0,255,255,1) 50%,
          rgba(0,0,0,1) 100%
      ) 0 0 100% 0/0 0 3px 0 stretch;
      -o-border-image: -o-linear-gradient(
          left,
          rgba(0,0,0,1) 1%,
          rgba(0,255,255,1) 50%,
          rgba(0,0,0,1) 100%
      ) 0 0 100% 0/0 0 3px 0 stretch;
      border-image: linear-gradient(
          to left,
          rgba(0,0,0,1) 1%,
          rgba(0,255,255,1) 50%,
          rgba(0,0,0,1) 100%
      ) 0 0 100% 0/0 0 3px 0 stretch;
  }
  </code></pre>
  
  <p><strong>Current Output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/bEzju.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bEzju.png" alt="enter image description here"></a></p>