title: Border with custom dash length and spacing
body: <p>How can I achive this kind of border? This 20px dash and 20px spacing between dashes. Is it even possible without custom background file? The closest i can get is something like 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>   .element {
        width: 600px;
        height: 300px;
        border-radius: 45px;
        background-image: linear-gradient(to right, red 50%, white 50%);
        background-position: top;
        background-size: 10px 1px;
        background-repeat: repeat-x;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
      
      &lt;div class="element"&gt;
      TEXT TEXT
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>live: <a href="https://jsfiddle.net/roo5rbb3/" rel="nofollow noreferrer">https://jsfiddle.net/roo5rbb3/</a></p>
  
  <p><a href="https://i.stack.imgur.com/064pR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/064pR.jpg" alt="enter image description here"></a></p>