3

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/

enter image description here

Subhrajyoti Das
  • 2,685
  • 3
  • 21
  • 36
KATq
  • 399
  • 2
  • 5
  • 17

1 Answers1

2

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;
}
viks
  • 1,368
  • 16
  • 19