Skip to main content

Circular dashed border

Create a circular dashed border with full control over the dashes. Only one element and a few lines of code are required. Simply update the CSS variables to control the design of the border.

Circular dashed border

.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);
linear-gradient(#0000 0 0) content-box,
from calc(var(--d)/2),
#000 0 calc(360deg/var(--n) - var(--d)),
#0000 0 calc(360deg/var(--n))
mask-composite: intersect;

See the Pen Dashed border by Temani Afif (@t_afif) on CodePen.