[css] gradient border (border-radius 가능 / 가운데 투명 가능)

gradient border mask를 활용해서 border-radius도 가능하고 중간을 비울 수도 있는 방법입니다.

.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 10px; 
  background:linear-gradient(45deg,red,blue); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

출처: https://dev.to/afif/border-with-gradient-and-radius-387f