round() | CSS-Tricks

The CSS round() function enables us to round a number, percentage, or dimension (i.e., a number with units attached). We’ve been able to round using JavaScript for decades, but browsers recently added support for CSS round(), which means it now works in all major browsers.

For example, these values are rounded to the nearest 1px:

/* Rounds to 10px */
width: round(10.4px, 1px);

/* Rounds to 11px */
width: round(10.6px, 1px);

Syntax

round(<rounding-strategy>?, valueToRound, roundingInterval)

Arguments

<rounding-strategy> (optional): Accepts up, down, nearest, or to-zero as an argument. If you don’t specify an argument, the default argument of nearest will be used.
- up: Rounds up to the next interval
- down: Rounds down to the next interval
- nearest (default): Rounds up or down to the next interval (whichever is nearest)
- to-zero: Rounds to the next interval in the direction of 0 (i.e., negative numbers will become less negative, and positive numbers will become less positive)
valueToRound: must be a number, percentage, dimension, or an expression that resolves to any of those (an expression might contain CSS variables, functions such as calc(), and so on).
roundingInterval: The value to be rounded will be rounded to this roundingInterval. Again, it must be a number, percentage, dimension, or an expression that resolves to any of those. For example, if the roundingInterval is 0.1, 3.33 will be rounded to either 3.3 or 3.4 depending on the rounding strategy.

`<rounding-strategy>`	JavaScript equivalent
`up`	`Math.ceil()`
`down`	`Math.floor()`
`nearest`	`Math.round()`
`to-zero`	`Math.trunc()`

Basic usage


/* Rounds up to the next interval of 1px */
width: round(up, 10.4px, 1px); /* Returns 11px */

/* Rounds down to the next interval of 1px */
width: round(down, 10.6px, 1px); /* Returns 10px */

/* Rounds to the nearest interval of 1px */
width: round(nearest, 10.4px, 1px); /* Returns 10px */
width: round(nearest, 10.6px, 1px); /* Returns 11px */

/* Per rounding conventions, if the value to be rounded sits exactly in the middle of two intervals, it’ll be rounded up */
width: round(nearest, 10.5px, 1px); /* So this returns 11px too */

/* Equivalent to the above */
width: round(10.5px, 1px); /* Returns 11px */

/* Rounds to the next interval in the direction of 0 */
width: round(to-zero, 10.6px, 1px); /* Returns 10px */
width: round(to-zero, -10.6px, 1px); /* Returns -10px */

/* Different rounding intervals */
width: round(1.4px, 10px); /* Returns 0px */
width: round(10.44px, 0.1px); /* Returns 10.4px */

/* Different units and properties */
width: round(10.4%, 1%); /* Returns 10% */
line-height: round(10.4, 1); /* Returns 10 */

/* With CSS variables */
width: round(var(--valueToRound), var(--roundingInterval));

Demo

Adjust the rounding strategy and select a rounding value to change how much the element rotates in the following demo.

Browser support

The CSS round() function works in all major browsers.

That being said, we can detect browser support for it, if needed:

@supports (width: round(0px, 0px)) {
  /* round() supported */
}

@supports not (width: round(0px, 0px)) {
  /* round() not supported */
}

The same thing in JavaScript:

if (CSS.supports("width: round(0px, 0px)")) {
  /* round() supported */
}

if (!CSS.supports("width: round(0px, 0px)")) {
  /* round() not supported */
}