CSS - round()

概要

形式	round(<rounding-strategy>, value, interval?)
値の詳細	<rounding-strategy> = nearest \| up \| down \| to-zero
サポート	https://caniuse.com/mdn-css_types_round

value の interval の整数倍に四捨五入、切り上げ、切り捨てします。

<rounding-strategy>

下記のいずれかを指定します。

nearest (デフォルト): 四捨五入します。JavaScript の Math.round() と同じ計算を行います。
up: 切り上げます。負数の場合はより正の方向に切り上げます。JavaScript の Math.ceil() と同じ計算を行います。
down: 切り捨てます。負数の場合はより負の方向に切り捨てます。JavaScript の Math.floor() と同じ計算を行います。
to-zero: 0 に近い方向に丸めます。正数の場合は負の方向に切り捨て、負数の場合は正の方向に切り上げます。JavaScript の Math.trunc() と同じ計算を行います。

value

四捨五入、切り上げ、切り捨て対象を指定します。数値、長さ(pxなど)、時間(msなど)、周波数(Hzなど)、解像度(dpiなど)、角度(degなど)、パーセンテージ(%) を指定できます。

interval

丸め単位を指定します。丸め単位の整数倍の値となるように四捨五入、切り上げ、切り捨てされます。省略時は 1 とみなされます。value が数値以外の場合に省略すると、単位付きの値と単位無しの 1 の演算となってしまいエラーとなるようです。

下記の例では画面の横幅を 100px の倍数になるように切り捨てます。

CSS

.box {
  width: round(down, 100vw, 100px);
}

初版：2024年12月29日、最終更新：2024年12月29日

http://www.tohoho-web.com/css/func/round.htm