<div class="curved-0">0. Hover me </div>
<div class="curved-1">1. Hover me </div>
<div class="curved-2">2. Hover me </div>
<div class="curved-3">3. Hover me </div>
<div class="curved-4">4. Hover me </div>
<div class="curved-5">5. Hover me </div>
<div class="curved-6">6. Hover me </div>
<div class="curved-7">7. Hover me </div>

.curved-0 {
  padding: 8px;
  border-radius: 12px;
  border:3px solid #0000;
  transition: 0.5s;
}
.curved-0:hover {
  border:3px solid currentColor;
}

.curved-1 {
  padding: 8px;
  border-radius: 0 0 12px 12px;
  border:3px solid #0000;
  transition: 0.5s;
  clip-path: polygon(4px 4px,calc(100% - 4px) 4px,calc(100% - 4px) calc(100% - 14px), 100% calc(100% - 14px),100% 100%,0 100%,0 calc(100% - 14px),4px calc(100% - 14px));
}
.curved-1:hover {
  border-color:currentColor;
}
.curved-2 {
  padding: 8px;
  border-radius: 0 0 0 0;
  border:3px solid #0000;
  transition: 0.3s,border-color 0.3s 0.3s;
  clip-path: polygon(4px 4px,calc(100% - 4px) 4px,calc(100% - 4px) calc(100% - 3px),  100% calc(100% - 3px), 100% 100%,0 100%,0 calc(100% - 3px), 4px calc(100% - 3px));
}
.curved-2:hover {
  border-color:currentColor;
  border-radius: 0 0 12px 12px;
  transition: 0.3s,clip-path 0.3s 0.3s,border-radius 0.3s 0.3s;
  clip-path: polygon(4px 4px,calc(100% - 4px) 4px,calc(100% - 4px) calc(100% - 14px), 100% calc(100% - 14px),100% 100%,0 100%,0 calc(100% - 14px),4px calc(100% - 14px));
}

.curved-3 {
  padding: 8px;
  border-radius: 12px;
  border:3px solid #0000;
  -webkit-mask:
    linear-gradient(#fff 0 0) top   /calc(100% - 30px) 4px,
    linear-gradient(#fff 0 0) bottom/calc(100% - 30px) 4px,
    linear-gradient(#fff 0 0) left  /4px calc(100% - 30px),
    linear-gradient(#fff 0 0) right /4px calc(100% - 30px),
    linear-gradient(#fff 0 0);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:destination-out;
  -webkit-mask-composite:exclude;
  transition: 0.5s
}
.curved-3:hover {
  border-color:currentColor;
}

.curved-4 {
  padding: 8px;
  border-radius: 0;
  border:3px solid #0000;
  -webkit-mask:
    linear-gradient(#fff 0 0) top   /calc(100% - 30px) 4px,
    linear-gradient(#fff 0 0) bottom/calc(100% - 30px) 4px,
    linear-gradient(#fff 0 0) left  /4px calc(100% - 30px),
    linear-gradient(#fff 0 0) right /4px calc(100% - 30px),
    linear-gradient(#fff 0 0);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:destination-out;
  -webkit-mask-composite:exclude;
  transition: 0.3s,border-color 0.3s 0.3s;
}
.curved-4:hover {
  border-radius: 12px;
  border-color:currentColor;
  transition: 0.3s,border-radius 0.3s 0.3s;
}

.curved-5 {
  padding: 8px;
  border-radius: 100px;
  border:3px solid #0000;
  -webkit-mask:
    linear-gradient(#fff 0 0) top   /calc(100% - 100px) 4px,
    linear-gradient(#fff 0 0) bottom/calc(100% - 100px) 4px,
    linear-gradient(#fff 0 0);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:destination-out;
  -webkit-mask-composite:exclude;
  transition: 0.5s;
}
.curved-5:hover {
  border-color:currentColor;
}
.curved-6 {
  padding: 8px;
  border-radius:0 0 12px 12px;
  border:3px solid #0000;
  border-top: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) 50% 100%/80px 20px,
    linear-gradient(#fff 0 0) 50% 100%/80px 20px,
    linear-gradient(#fff 0 0) top /calc(100% - 12px) calc(100% - 12px);
  -webkit-mask-repeat:no-repeat;
  transition: 0.3s,border-color 0.3s 0.3s;
}
.curved-6:hover {
  border-color:currentColor;
  -webkit-mask-position:0% 100%,100% 100%,top;
  transition: 0.3s,-webkit-mask-position 0.3s 0.3s;
}

.curved-7 {
  padding: 8px;
  border-radius:12px;
  border:3px solid currentColor;
  -webkit-mask:
    linear-gradient(#fff 0 0) top   /var(--d,0%) 5px,
    linear-gradient(#fff 0 0) bottom/var(--d,0%) 5px,
    linear-gradient(#fff 0 0) left  /5px var(--d,0%),
    linear-gradient(#fff 0 0) right /5px var(--d,0%),
    linear-gradient(#fff 0 0) center /calc(100% - 12px) calc(100% - 12px);
  -webkit-mask-repeat:no-repeat;
  transition: 0.5s;
}
.curved-7:hover {
  --d:100%;
}

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}
body > [class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}