Border with custom dash length and spacing [duplicate]

Question

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:

   .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;
    }

 
    
    <div class="element">
    TEXT TEXT
    </div>

live: https://jsfiddle.net/roo5rbb3/

Answer 1

Try this:

border-style: dashed;

So your complete css will look like this:

.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;
    border-color: red;
    border-width: 2px;
    border-style: dashed;
}