:root { --border-animation-color: #ED1C24; --border-animation-speed: 7s; --border-animation-width: 1px; } @property --border-animation-angle { syntax: "<angle>"; initial-value: 0turn; inherits: false; } @keyframes borderRotate { to { --border-animation-angle: 1turn; } } .ct-border-animation:after { pointer-events: none; content: ""; position: absolute; inset: calc(var(--border-animation-width) * -1); border-radius: inherit; border: solid transparent; border-width: var(--border-animation-width); animation: borderRotate var(--border-animation-speed) linear infinite; background: conic-gradient(from var(--border-animation-angle), transparent 88%, var(--border-animation-color), var(--border-animation-color) 100%, transparent) border-box; background-clip: border-box; background-origin: border-box; mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(97% - var(--border-animation-width)), rgba(0, 0, 0, 0)) content-box, radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(2% - var(--border-animation-width)), #000) border-box; -webkit-mask-composite: destination-in; mask-composite: intersect; }