title: How to create Rectangle With Gradient Color Stripes Border via CSS?
body: <p>I want to create Round Edges Rectangle With <strong>Gradient Color Stripes Border</strong>.</p>
  
  <p>I want to use the <strong>img</strong> tag or <strong>div</strong> tag to include the image and the Gradient Striped Border.</p>
  
  <p>This is how it needs to look like:
  <a href="https://i.stack.imgur.com/jBI1e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jBI1e.png" alt="enter image description here"></a></p>
  
  <p>I try to search around and i found that (SCSS) example: <strong><a href="https://jsfiddle.net/rami7250/yujsz7wf/" rel="noreferrer">https://jsfiddle.net/rami7250/yujsz7wf/</a></strong></p>
  
  <p>and i got this SCSS code:</p>
  
  <pre><code>.module {
    background: white;
    border: 1px solid #ccc;
    margin: 3%;
    &gt; h2 {
      padding: 1rem;
      margin: 0 0 0.5rem 0;
    }
    &gt; p {
      padding: 0 1rem;
    }
    /*animation: widen 10s linear alternate infinite;*/
  }
  
  .stripe-1 {
    color: white;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
  }
  </code></pre>
  
  <p>As you can see, that feature effect only <strong>background</strong> and not <strong>border</strong>.</p>
  
  <p>How do I make that Rectangle to display Gradient Color Stripes in his Border Via CSS/SCSS?</p>