title: 4 gradient borders in CSS
body: <p>I need help applying a <strong>gradient border</strong> on all the 4 sides of a box. I tried it, but it only works for two sides. After looking at all the links and SO answers I have got this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test{
    height:250px;
    border: 2px solid;
    border-image: linear-gradient(to left,rgba(78,137,176,1)  1%, rgba(115,192,85,1)  100%) 100% 0 100% 0/2px 0 2px 0;
    padding-top:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;
    This is a box and I want borders for all the sides
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would appreciate any help. I am trying something similar to the image below.
  Thank you.</p>
  
  <p><a href="https://i.stack.imgur.com/zmnU5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zmnU5.jpg" alt="enter image description here"></a></p>