Arc shape with rounded edges

Temani Afif5/20/25About 2 minCSSArticle(s)blogcss-tip.comcss

Arc shape with rounded edges 관련

CSS > Article(s)

Article(s)

A modern way to create arc shapes with rounded edges using minimal code

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.

@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 Arc shape with rounded edges by 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}
}