CSS Reference

round()

引数を指定した形に丸める

round() 関数は、渡された引数を指定した形に丸める（例えば四捨五入するなど）ことができる CSS 関数です。

round() 関数、および mod() 関数、rem() 関数は、ステップ値関数と呼ばれ、引数を様々な形に変換することが可能です。

round() 関数の基本的な構文は下記のようになります。

round(<rounding-strategy>?, A, B?)

具体的な記述例は下記の通りです。

:root {
  --width: 50%;
}

.example {
  height: round(var(--width), 25px);
}

round() 関数は、A の値を B の最も近い整数倍に丸めます。

計算結果は、任意の <number>、<dimension>、または <percentage> 値となりますが、2つの引数は同じデータ型を持たなければならず、そうでない場合、関数は無効となります。また、導き出される値も同じデータ型になります。

<rounding-strategy>

<rounding-strategy> は、どのように丸めるかを指定します。初期値は nearest です。

A が B の整数倍と正確に一致する場合を除き、A の値は、2つの B の整数倍の中間となります。<rounding-strategy> は、このとき、2つの B の整数倍（小さい方の値か、大きい方の値か）どちらを選択して値を丸めるかを指定します。

つまり、上記のサンプルソースコードの例で、var(--width) が 102px と計算された場合（round(102px, 25px); と解釈）、B がとる整数倍は、..., 100, 125, ... となるわけですが、引数 A である 102px は B の整数倍のうち、小さい値である 100 と、大きい値である 125 の中間となります。

ではこのとき、A の値をどのような方法で、どちらの B を選択して丸めるのかを決めるのが <rounding-strategy> です。

nearest 絶対差が最も小さい方の B を選択します。もし両方の差が等しい場合 (A が2つの B 値のちょうど中間である場合)は、大きい方の B を選択します。これは、JavaScript における Math.round() と同様の結果となります。初期値です。
up 大きい方の B を選択。つまり切り上げ。これは、JavaScript における Math.ceil() と同様の結果となります。
down 小さい方の B を選択。つまり切り捨て。これは、JavaScript における Math.floor() と同様の結果となります。
to-zero 0 により近い方の B を選択。これは、JavaScript における Math.trunc() と同様の結果となります。

round()のサンプルソース

.example01 {
  height: round(105px, 25px); /* height = 100px */
}

.example02 {
  height: round(up, 105px, 25px); /* height = 125px */
}

.example03 {
  height: round(down, 105px, 25px); /* height = 100px */
}

.example04 {
  height: round(to-zero, 105px, 25px); /* height = 100px */
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome