dashed border stroke distance when use border-radius

Question

I want to increase the distance between the border strokes. I tried different methods.

for example: enter link description here

But it does not work correctly when I use border-radius.

Try it in this JSFiddle

#border {
 width: 250px;
 height: 100px;
 background: yellow;
 text-align: center;
 line-height: 100px;
 background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 
 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), 
 linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
 background-position: top, right, bottom, left;
 background-repeat: repeat-x, repeat-y;
 background-size: 10px 1px, 1px 10px;
 border-radius: 30px;
}

score 0 · Accepted Answer · answered Jan 13 '21 at 12:52

You can use the following code:

#border {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%2350535AFF' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='81' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: 20px;
    height: 80px;
    line-height: 80px;
    font-size: $sama-font-size-3;
    color: mat-color($mat-sama-gray, 58);
    text-align: center;
    cursor: pointer;
}

You can generate the code online from the site below: Customize your CSS Border

and you can See the result from JSFiddle

dashed border stroke distance when use border-radius

1 Answers1