JSFiddle - React, Tailwind, and code Playground

by mahdiihd

HTML

<div id="border">
  bordered area with border-radius
</div>

CSS

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