Math functions compute values when styles resolve, so they can mix units known only at layout time: width: calc(100% - 2 * 1rem). Surround + and - with spaces (calc(100% -1rem) is invalid). clamp(min, ideal, max) equals max(min, min(ideal, max)) and powers fluid typography (Fluid Typography). calc(), min(), max(), clamp(), trigonometry and the constants pi and e are Baseline widely available, as are pow(), sqrt(), hypot(), log() and exp() (since 2026); round(), mod() and rem() (2024) and abs() and sign() (2025) are newly available.
round(up, 123px, 50px) snaps to a multiple of the interval (nearest, up, down or to-zero). mod() takes the divisor's sign and rem() the dividend's: mod(-7, 3) is 2, rem(-7, 3) is -1. sin(), cos() and tan() take angles (or numbers as radians); asin(), acos(), atan() and atan2() return angles.
<style>
.ring { position: relative; display: inline-block; width: 160px; height: 160px; }
.ring i { position: absolute; inset: 72px; border-radius: 50%; background: #1565c0;
translate: calc(cos(var(--i) * 45deg) * 64px) calc(sin(var(--i) * 45deg) * 64px); }
.bars { display: inline-block; vertical-align: top; width: 220px; font: 12px monospace; }
.bars div { margin: 6px 0; background: #ef6c00; color: #fff; white-space: nowrap; }
</style>
<div class="ring">
<i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i><i style="--i: 3"></i>
<i style="--i: 4"></i><i style="--i: 5"></i><i style="--i: 6"></i><i style="--i: 7"></i></div>
<div class="bars">
<div style="width: clamp(60px, 50%, 180px)">clamp: 110px</div>
<div style="width: round(up, 123px, 50px)">round(up): 150px</div>
<div style="width: calc(mod(-7, 3) * 60px)">mod(-7,3): 120px</div>
<div style="width: calc(pow(2, 7) * 1px)">pow(2,7): 128px</div>
</div>
Because var(--i) differs per element, one rule places every dot. Guard newer functions with @supports (width: round(1px, 1px)).