border 그라데이션 + radius

HTML

<a href="#" class="btn">
  <p>button</p>
</a>

CSS

.btn {
  --border-width: 1px;
  --border-radius: 20.5px;
  width: 188px;
  height: 41px;
  border: 0;
  background:linear-gradient(91.45deg, #833AB4 3.65%, #FD1D1D 50.45%, #FCB045 98.37%) border-box;
  position: relative;
  border-radius: var(--border-radius);
  z-index: 1;
}

.btn::before {
  content: "";
  display: block;
  width: calc(100% - calc(var(--border-width)*2));
  height: calc(100% - calc(var(--border-width)*2));
  background: #fff;
  position: absolute;
  top: var(--border-width);
  left: var(--border-width);
  border-radius: calc(var(--border-radius) - var(--border-width));
  z-index: -1;
}

https://www.youtube.com/watch?v=YcfTH5w6in4 영상 참고