rounded corners v2

by Petr Haluza

HTML

<div class="box">jaja</div>
<div class="box" style="width:100px;--r:50px">jajajaja</div>
<div class="box" style="width:150px;--r:50px">ajajajajaj</div>

CSS

.box {
  --r:30px; /* radius*/
  --g:5px; /* gap */
  
  width:200px;
  height:100px;
  display:inline-block;
  box-sizing:border-box;
  padding:20px;
  position:relative;
  margin:10px;
}
 
.box:before {
  content:"";
  position:absolute;
  inset:0;
  border:5px solid red;
  border-radius:var(--r);
  --m:#0000 90deg,#000 0; 
  -webkit-mask:
    conic-gradient(from -180deg at calc(100% - var(--g)) var(--g)            ,var(--m))
        0    100%/var(--r) var(--r),
    conic-gradient(from  90deg at var(--g)              var(--g)             ,var(--m))
        100% 100%/var(--r) var(--r),
    conic-gradient(from   0deg at var(--g)              calc(100% - var(--g)),var(--m))
        100% 0   /var(--r) var(--r),
    conic-gradient(from -90deg at calc(100% - var(--g)) calc(100% - var(--g)),var(--m))
        0    0   /var(--r) var(--r),
    linear-gradient(#000 0 0);
   -webkit-mask-repeat:no-repeat;
   -webkit-mask-composite:xor;
   mask-composite:exclude;
}