CSS round() function

Definition and usage

CSS's round() The function rounds the number to the nearest multiple of the rounding interval specified by the rounding strategy.

Example

Using round() Round the number to the nearest multiple of the specified rounding interval according to the rounding strategy:

div.box2 {
  height: round(up, 105px, 25px);
}
div.box3 {
  height: round(down, 120px, 25px;
}
div.box4 {
  height: round(to-zero, 115px, 25px);
}

Try it yourself

CSS syntax

round(rounding-strategy, valuetoround, roundinginterval)
Value Description
rounding-strategy

Optional. Specify the rounding strategy. It can be one of the following values:

  • nearest: Default value. Round the valuetoround value to the nearest multiple of roundinginterval
  • up: Round the valuetoround value up to the nearest multiple of roundinginterval
  • down: Round the valuetoround value down to the nearest multiple of roundinginterval
  • to-zero: Round the valuetoround value to the nearest multiple of roundinginterval and closer to zero
valuetoround Required. The value to be rounded (number, percentage, size, or mathematical expression).
roundinginterval Required. Rounding interval (number, percentage, size, or mathematical expression).

Technical details

Version: CSS4

Browser support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
125 125 118 15.4 111

Related pages

Reference:CSS acos() function

Reference:CSS asin() function

Reference:CSS atan() function

Reference:CSS atan2() function

Reference:CSS calc() function

Reference:CSS cos() function

Reference:CSS exp() function

Reference:CSS hypot() function

Reference:CSS log() function

Reference:CSS mod() function

Reference:CSS pow() function