원형 점선 테두리

대시를 완벽하게 제어할 수 있는 원형 점선 테두리를 만듭니다. 단 하나의 요소와 몇 줄의 코드만 필요합니다. 테두리 디자인을 제어하려면 CSS 변수를 업데이트하기만 하면 됩니다.

 

.box {
  --n: 20;   /* control the number of dashes */
  --d: 8deg; /* control the distance between dashes */
  --t: 5px;  /* control the thickness of border*/
  --c: red;  /* control the coloration (can be a gradient) */
  
  width: 120px;
  aspect-ratio: 1;
  position: relative;
}
.box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: var(--t);
  background: var(--c);
  mask:
      linear-gradient(#0000 0 0) content-box,
      repeating-conic-gradient(
         from calc(var(--d)/2),
         #000  0 calc(360deg/var(--n) - var(--d)),
         #0000 0 calc(360deg/var(--n))
       );
  mask-composite: intersect;
}