Unit Rulebook

Type a unit, or a word from its description.

    Math functions

    27 functions that let a stylesheet compute a value. Each one has its syntax, a short example with the result it should give, and its support, which is read from browser data when the site is built.

    About the version numbers

    Versions are printed exactly as MDN browser-compat-data 8.1.7 gives them, checked 2026-11-01. Versions above the current stable release are listed as published in the data and have not been checked against release dates. This page does not look release dates up.

    Current stable release in that data: Chrome 156, Chrome Android 156, Edge 155, Firefox 158, Firefox Android 158, Safari 27, Safari iOS 27. Listed above it: random() in Edge 156.

    Compare and combine

    The four that most stylesheets already use. They have been in every major browser for years.

    calc()

    Syntax calc(A + B)

    Does arithmetic where CSS expects one value, so a width can be a percentage minus a fixed gap. The next three compare values; this one computes with them.

    Plus and minus need a space on both sides, so calc(1px + 2px) works and calc(1px+2px) does not. Times and divide have no such rule.

    Safe to useBaseline: widely available

    • Chrome 26+
    • Edge 12+
    • Firefox 16+
    • Safari 7+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome26+
    Chrome Android28+
    Edge12+
    Firefox16+
    Firefox Android16+
    Safari7+
    Safari iOS7+

    Example width: calc(50vw - 40px);

    Result460px in a window 1000px wide

    MDNSpecification

    min()

    Syntax min(A, B, ...)

    Uses the smallest of its values, which makes it an upper limit: min(80vw, 600px) grows with the window until it reaches 600px.

    It takes any number of values, not just two.

    Safe to useBaseline: widely available

    • Chrome 79+
    • Edge 79+
    • Firefox 75+
    • Safari 11.1+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome79+
    Chrome Android79+
    Edge79+
    Firefox75+
    Firefox Android79+
    Safari11.1+
    Safari iOS11.3+

    Example width: min(80vw, 600px);

    Result600px in a window 1000px wide

    MDNSpecification

    max()

    Syntax max(A, B, ...)

    Uses the largest of its values, which makes it a lower limit: max(10vw, 120px) never drops under 120px.

    Write the floor in rem and it also rises with the reader's default font size.

    Safe to useBaseline: widely available

    • Chrome 79+
    • Edge 79+
    • Firefox 75+
    • Safari 11.1+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome79+
    Chrome Android79+
    Edge79+
    Firefox75+
    Firefox Android79+
    Safari11.1+
    Safari iOS11.3+

    Example width: max(10vw, 120px);

    Result120px in a window 1000px wide

    MDNSpecification

    clamp()

    Syntax clamp(MIN, VALUE, MAX)

    Limits VALUE to the range from MIN to MAX, and is the usual tool for fluid type. It gives the same result as max(MIN, min(VALUE, MAX)).

    When MIN is larger than MAX, MIN is used.

    Safe to useBaseline: widely available

    • Chrome 79+
    • Edge 79+
    • Firefox 75+
    • Safari 13.1+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome79+
    Chrome Android79+
    Edge79+
    Firefox75+
    Firefox Android79+
    Safari13.1+
    Safari iOS13.4+

    Example width: clamp(200px, 30vw, 400px);

    Result300px in a window 1000px wide

    MDNSpecification

    clamp() builder

    Snap and wrap

    Round a value to a grid, or find what is left over after dividing.

    round()

    Syntax round(strategy, A, B)

    Rounds A to a multiple of B. The strategy is nearest, up, down or to-zero, and nearest applies when you leave the strategy out.

    B is the grid you snap to, so round(down, 100vw, 100px) moves in steps of a hundred pixels.

    Use with a fallbackBaseline: newly available since May 2024

    • Chrome 125+
    • Edge 125+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome125+
    Chrome Android125+
    Edge125+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: round(down, 100vw, 100px);

    Result1000px in a window 1050px wide

    MDNSpecification

    mod()

    Syntax mod(A, B)

    The remainder of A divided by B, with the sign of B. mod(-18px, 5px) is 2px, the distance up to the next multiple.

    Its result is never negative when B is positive, which suits wrapping a position around a loop.

    Use with a fallbackBaseline: newly available since May 2024

    • Chrome 125+
    • Edge 125+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome125+
    Chrome Android125+
    Edge125+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example margin-inline-start: mod(-18px, 5px);

    Result2px

    MDNSpecification

    rem()

    Syntax rem(A, B)

    The remainder of A divided by B, with the sign of A. rem(-18px, 5px) is -3px, the part that is left over after taking whole fives out.

    The name has nothing to do with the rem unit. The two only share three letters.

    Use with a fallbackBaseline: newly available since May 2024

    • Chrome 125+
    • Edge 125+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome125+
    Chrome Android125+
    Edge125+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example margin-inline-start: rem(-18px, 5px);

    Result-3px

    MDNSpecification

    Angles

    Sine, cosine and tangent take an angle and return a number. Their inverses take a number and return an angle.

    sin()

    Syntax sin(angle)

    The sine of an angle, a number from -1 to 1. Multiply it by a length to put something on a wave: sin(30deg) is 0.5, so 200px times that is 100px.

    A bare number counts as radians, so sin(1) is the sine of one radian and not of one degree.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(sin(30deg) * 200px);

    Result100px

    MDNSpecification

    cos()

    Syntax cos(angle)

    The cosine of an angle, from -1 to 1. It is 1 at 0deg and 0.5 at 60deg.

    It is the sine moved a quarter turn: cos(x) equals sin(x + 90deg). Pair the two to place a point on a circle.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(cos(60deg) * 200px);

    Result100px

    MDNSpecification

    tan()

    Syntax tan(angle)

    The tangent of an angle: the rise over the run of a slope with that angle. tan(45deg) is 1, so the rise equals the run.

    The value grows without limit as the angle nears 90deg, so keep inputs well away from it.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(tan(45deg) * 100px);

    Result100px

    MDNSpecification

    asin()

    Syntax asin(number)

    Turns a number from -1 to 1 back into the angle whose sine it is. asin(0.5) is 30deg.

    The angle it returns lies between -90deg and 90deg.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example rotate: asin(0.5);

    Result30deg

    MDNSpecification

    acos()

    Syntax acos(number)

    Turns a number from -1 to 1 back into the angle whose cosine it is. acos(0.5) is 60deg.

    The angle it returns lies between 0deg and 180deg.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example rotate: acos(0.5);

    Result60deg

    MDNSpecification

    atan()

    Syntax atan(number)

    Turns a slope back into an angle. atan(1) is 45deg, a slope that rises as far as it runs.

    Any number is accepted, and the angle stays between -90deg and 90deg however large the slope gets.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example rotate: atan(1);

    Result45deg

    MDNSpecification

    atan2()

    Syntax atan2(y, x)

    The angle of the point (x, y) as seen from the origin. Because it gets both coordinates, it knows the quadrant: atan2(1, -1) is 135deg, where atan(-1) could only say -45deg.

    The vertical value comes first and the horizontal one second, the reverse of how a point is usually written.

    Safe to useBaseline: widely available

    • Chrome 111+
    • Edge 111+
    • Firefox 108+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox108+
    Firefox Android108+
    Safari15.4+
    Safari iOS15.4+

    Example rotate: atan2(1, -1);

    Result135deg

    MDNSpecification

    Powers and roots

    Plain arithmetic on numbers, plus hypot() for lengths.

    pow()

    Syntax pow(base, exponent)

    Raises base to the power of exponent. pow(2, 3) is 8, and 8 times 10px is 80px.

    Both arguments are plain numbers. Giving it a length, as in pow(2px, 2), is invalid.

    Safe to useBaseline: widely available

    • Chrome 120+
    • Edge 120+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome120+
    Chrome Android120+
    Edge120+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(pow(2, 3) * 10px);

    Result80px

    MDNSpecification

    sqrt()

    Syntax sqrt(number)

    The square root of a number. sqrt(81) is 9. Multiply sqrt(2) by a side length to get the diagonal of a square.

    A length does not go in, so sqrt(81px) is invalid. Use hypot() when the values are lengths.

    Safe to useBaseline: widely available

    • Chrome 120+
    • Edge 120+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome120+
    Chrome Android120+
    Edge120+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(sqrt(81) * 10px);

    Result90px

    MDNSpecification

    hypot()

    Syntax hypot(A, B, ...)

    The length of the diagonal for the sides you give it. A box 30px by 40px has a 50px diagonal.

    It takes lengths as they are, and a third side gives the diagonal of a block: hypot(2px, 3px, 6px) is 7px.

    Safe to useBaseline: widely available

    • Chrome 120+
    • Edge 120+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome120+
    Chrome Android120+
    Edge120+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: hypot(30px, 40px);

    Result50px

    MDNSpecification

    log()

    Syntax log(value, base)

    The exponent you would give the base to get the value. log(8, 2) is 3, because 2 to the third power is 8.

    With one argument the base is e, so it is the natural logarithm and not the base-10 one.

    Safe to useBaseline: widely available

    • Chrome 120+
    • Edge 120+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome120+
    Chrome Android120+
    Edge120+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(log(8, 2) * 10px);

    Result30px

    MDNSpecification

    exp()

    Syntax exp(number)

    The number e raised to a power. exp(1) is about 2.7183, which makes the example below 27.1828px.

    It undoes the one-argument log(): exp(log(5)) is 5.

    Safe to useBaseline: widely available

    • Chrome 120+
    • Edge 120+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome120+
    Chrome Android120+
    Edge120+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example font-size: calc(exp(1) * 10px);

    Result27.1828px

    MDNSpecification

    Size and direction

    Drop the sign of a value, or keep only the sign.

    abs()

    Syntax abs(A)

    Drops the minus sign. Applied to the gap between two positions it gives the distance, whichever one comes first.

    The unit survives: abs(-20px) is 20px, not the bare number 20.

    Use with a fallbackBaseline: newly available since June 2025

    • Chrome 138+
    • Edge 138+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome138+
    Chrome Android138+
    Edge138+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: abs(50vw - 400px);

    Result100px in a window 600px wide

    MDNSpecification

    sign()

    Syntax sign(A)

    Keeps only the direction of a value: -1 for negative, 0 for zero, 1 for positive.

    The answer is a plain number even when the input is a length, so it can scale a length of your choice.

    Use with a fallbackBaseline: newly available since June 2025

    • Chrome 138+
    • Edge 138+
    • Firefox 118+
    • Safari 15.4+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome138+
    Chrome Android138+
    Edge138+
    Firefox118+
    Firefox Android118+
    Safari15.4+
    Safari iOS15.4+

    Example width: calc(100px + 10px * sign(50vw - 400px));

    Result90px in a window 600px wide

    MDNSpecification

    Newer and not everywhere yet

    Check the support line of each one before you rely on it.

    calc-size()

    Syntax calc-size(basis, calculation)

    Arithmetic on a size that has no number yet, such as auto, min-content or max-content. Inside the calculation the word size stands for what the basis turns out to be.

    Plain calc() rejects those keywords, which is the gap this function fills.

    Limited supportMissing in some major browsers

    • Chrome 129+
    • Edge 129+
    • Firefox No
    • Safari No
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome129+
    Chrome Android129+
    Edge129+
    FirefoxNo
    Firefox AndroidNo
    SafariNo
    Safari iOSNo

    Example height: calc-size(auto, size + 20px);

    Result60px

    The box holds one child that is 40px tall.

    MDNSpecification

    progress()

    Syntax progress(value from start to end)

    Says where a value sits between two bounds, as a plain number: 0 at the start, 1 at the end, 0.5 halfway.

    Multiply the number by a length to map a range of window widths onto a range of sizes without writing the slope by hand.

    Use with a fallbackBaseline: newly available since September 2026

    • Chrome 138+
    • Edge 138+
    • Firefox 155+
    • Safari 26+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome138+
    Chrome Android138+
    Edge138+
    Firefox155+
    Firefox Android155+
    Safari26+
    Safari iOS26+

    Example width: calc(progress(100vw from 320px to 1280px) * 100px);

    Result50px in a window 800px wide

    Chromium 156 rejects progress(), and 153 did too, so this result comes from the definition above and was not run in a browser.

    MDNSpecification

    sibling-index()

    Syntax sibling-index()

    The position of the element among its siblings, as a number. Multiply it by a length or a time and each child gets its own value from one rule.

    Counting starts at 1, so the first child gets 1 and not 0.

    Use with a fallbackBaseline: newly available since August 2026

    • Chrome 138+
    • Edge 138+
    • Firefox 154+
    • Safari 26.2+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome138+
    Chrome Android138+
    Edge138+
    Firefox154+
    Firefox Android154+
    Safari26.2+
    Safari iOS26.2+

    Example width: calc(sibling-index() * 10px);

    Result30px

    The element is the third of five siblings.

    MDNSpecification

    sibling-count()

    Syntax sibling-count()

    How many children the parent has. It lets each child take an equal share without knowing the total in advance.

    The element counts itself, so a lone child gets 1.

    Use with a fallbackBaseline: newly available since August 2026

    • Chrome 138+
    • Edge 138+
    • Firefox 154+
    • Safari 26.2+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome138+
    Chrome Android138+
    Edge138+
    Firefox154+
    Firefox Android154+
    Safari26.2+
    Safari iOS26.2+

    Example width: calc(100px / sibling-count());

    Result20px

    The element is the third of five siblings.

    MDNSpecification

    if()

    Syntax if(condition: A; else: B)

    Chooses a value from inside a declaration. The condition can be a media query, a feature query or a style query, so a small choice no longer needs its own rule block.

    The else branch is what applies when nothing before it matched.

    Limited supportMissing in some major browsers

    • Chrome 137+
    • Edge 137+
    • Firefox No
    • Safari No
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome137+
    Chrome Android137+
    Edge137+
    FirefoxNo
    Firefox AndroidNo
    SafariNo
    Safari iOSNo

    Example width: if(media(width >= 600px): 300px; else: 100px);

    Result300px in a window 700px wide

    MDNSpecification

    random()

    Syntax random(A, B)

    Picks a number between two bounds. The fixed form takes a position from 0 to 1 instead of drawing one, which is how this page can show a repeatable result.

    With fixed 0.5 the answer is the middle of the range, so 0px to 100px gives 50px.

    Limited supportMissing in some major browsers

    • Chrome 156+
    • Edge 156+
    • Firefox Preview
    • Safari 26.2+
    All browsers
    First version with support, from MDN browser data
    BrowserSince
    Chrome156+
    Chrome Android156+
    Edge156+
    FirefoxPreview
    Firefox AndroidNo
    Safari26.2+
    Safari iOS26.2+

    The data lists Edge 156 for this function, which is newer than the current release in the same data.

    Example width: random(fixed 0.5, 0px, 100px);

    Result50px

    MDNSpecification

    clamp() builder

    Give the smallest and largest size in rem and the window widths between which the size should grow. The builder prints a clamp() value whose middle part is a rem term plus a vw term.

    The builder needs JavaScript. The table below lists four examples that were computed when the site was built.

    Result
    Size at three window widths, at 100% zoom and at 200% zoom
    Window widthSize at 100%Viewport at 200%On screen at 200%Growth with zoom
    320px
    768px
    1280px
    Sample at this size

    Text at the size you chose

    How the sizes are computed

    At 100% zoom the size is the clamp() result at the window width, with 1rem taken as 16px, the browser default. At 200% zoom the browser makes the viewport half as wide in CSS pixels and draws every CSS pixel twice as big, so the size is worked out at half the window width and then doubled to get what the reader sees on screen. Growth is that on-screen size divided by the size at 100%. A number near 2 means zoom enlarges the text the way it enlarges rem text. A smaller number means the vw term pulled the size back.

    Four examples, computed at build time

    These come from the same function the builder uses. In each, the size starts growing at a 320px window and stops at 1280px, and 1rem is 16px.

    Four clamp() examples: size at three window widths and on screen at 200% zoom in a 1280px window
    Exampleclamp()Largest / smallest320px768px1280px1280px at 200% zoom, on screen
    Body textclamp(1rem, 0.9167rem + 0.4167vw, 1.25rem)1.25× (Within 2.5)16px17.87px20px34.67px (1.73×)
    Section headingclamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)1.5× (Within 2.5)24px29.6px36px56px (1.56×)
    Largest ratio without a warningclamp(1rem, 0.5rem + 2.5vw, 2.5rem)2.5× (Within 2.5)16px27.2px40px48px (1.2×)
    Display textclamp(1.5rem, 0.3333rem + 5.8333vw, 5rem)3.33× (Above 2.5)24px50.13px80px85.33px (1.07×)

    The 2.5 limit used in the third column is a widely used rule of thumb, not a WCAG requirement.