모든 요소 주위에 모서리 전용 테두리를 만듭니다.

모든 요소 주위에 모서리 전용 테두리를 만듭니다.

• 추가 요소 없음
• 의사 요소 없음
• 배경 속성만

마우스를 올리면 애니메이션을 적용할 수도 있습니다!

 

img {
  --b: 5px; /* border thickness */
  --c: #0000 25%,darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}