CSS Tip

Arc shape with rounded edges

Previously, I used CSS mask to create an arc shape with rounded edges. Now, we can rely on the new shape() function that produces a more compact code and gives better rendering. A single-element implementation optimized with CSS variables.

CSS-only arc shape with rounded edges

@property --_f {
  syntax: "<number>";
  inherits: false;
  initial-value: 0; 
}
.arc {
  --v: 35; /* [0 100] */
  --b: 40px; /* thickness */
  
  --_v: min(99.99,var(--v));
  --_f: round(down,var(--_v),50);
  --_c: if(style(--_f: 0): small; else: large);
  aspect-ratio: 1;
  clip-path: shape(from top,
    arc to calc(50% + 50%*sin(var(--_v)*3.6deg)) 
           calc(50% - 50%*cos(var(--_v)*3.6deg)) of 50% var(--_c) cw,
    arc to calc(50% + (50% - var(--b))*sin(var(--_v)*3.6deg)) 
           calc(50% - (50% - var(--b))*cos(var(--_v)*3.6deg)) of 1% cw,
    arc to 50% var(--b) of calc(50% - var(--b)) var(--_c),
    arc to top of 1% cw
  );
}

See the Pen Arc shape with rounded edges by Temani Afif (@t_afif) on CodePen.

Another implementation using styles queries instead of inline conditions:

@property --_f {
  syntax: "<number>";
  inherits: false;
  initial-value: 0; 
}
.arc {
  --v: 35; /* [0 100] */
  --b: 40px; /* thickness */
  
  --_v: min(99.99,var(--v));
  --_f: round(down,var(--_v),50);
  aspect-ratio: 1;
  display: grid;
  container-name: arc;
}
.arc:before {
  content: "";
  clip-path: shape(from top,
    arc to calc(50% + 50%*sin(var(--_v)*3.6deg)) 
           calc(50% - 50%*cos(var(--_v)*3.6deg)) of 50% var(--_c,large) cw,
    arc to calc(50% + (50% - var(--b))*sin(var(--_v)*3.6deg)) 
           calc(50% - (50% - var(--b))*cos(var(--_v)*3.6deg)) of 1% cw,
    arc to 50% var(--b) of calc(50% - var(--b)) var(--_c,large),
    arc to top of 1% cw
  );
  @container style(--_f: 0) {--_c: small}
}

See the Pen Arc shape with rounded edges by Temani Afif (@t_afif) on CodePen.

And a demo with a starting animation

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

More CSS Tips