round

Description
Syntax
Examples
Links

Description

The round function for CSS contains an optional rounding strategy, and two calculations A and B, and returns the value of A, rounded according to the rounding strategy, to the nearest integer multiple of B either above or below A.

Syntax

CSS

round()

Values

<round()> =
    round(
        <rounding-strategy>?,
        <calc-sum>,
        <calc-sum>
    )

<rounding-strategy> =
    nearest |
    up |
    down |
    to-zero

nearest

Choose whichever of lower B and upper B that has the smallest absolute difference from A. If both have an equal difference (A is exactly between the two values), choose upper B.

up

Choose upper B.

down

Choose lower B.

to-zero

Choose whichever of lower B and upper B that has the smallest absolute difference from 0.

<calc-sum> =
    <calc-product>
    [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
    <calc-value>
    [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
    <number> |
    <dimension> |
    <percentage> |
    <calc-constant> |
    ( <calc-sum> )

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<dimension>

A number with a unit.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<calc-constant> =
    e |
    pi |
    infinity |
    -infinity |
    NaN

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

pi

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

infinity

Positive infinity.

-infinity

Negative infinity.

NaN

Not a number.

Multiplication.

Division.

Addition.

Subtraction.

Examples

1 · nearest

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: round(nearest, 24%, 25%);
            --myvar3: round(nearest, 25%, 25%);
            --myvar4: round(nearest, 49%, 25%);
            --myvar5: round(nearest, 50%, 25%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>nearest</div>
    <div>nearest</div>
    <div>nearest</div>
    <div>nearest</div>
    <div>nearest</div>
</body>
</html>

2 · up

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: round(up, 24%, 25%);
            --myvar3: round(up, 25%, 25%);
            --myvar4: round(up, 49%, 25%);
            --myvar5: round(up, 50%, 25%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>up</div>
    <div>up</div>
    <div>up</div>
    <div>up</div>
    <div>up</div>
</body>
</html>

3 · down

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: round(down, 24%, 25%);
            --myvar3: round(down, 25%, 25%);
            --myvar4: round(down, 49%, 25%);
            --myvar5: round(down, 50%, 25%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>down</div>
    <div>down</div>
    <div>down</div>
    <div>down</div>
    <div>down</div>
</body>
</html>

4 · to-zero

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: round(to-zero, 24%, 25%);
            --myvar3: round(to-zero, 25%, 25%);
            --myvar4: round(to-zero, 49%, 25%);
            --myvar5: round(to-zero, 50%, 25%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>to-zero</div>
    <div>to-zero</div>
    <div>to-zero</div>
    <div>to-zero</div>
    <div>to-zero</div>
</body>
</html>

5 · JS

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">nearest</button>
    <button onmouseover="myfunction(innerHTML)">up</button>
    <button onmouseover="myfunction(innerHTML)">down</button>
    <button onmouseover="myfunction(innerHTML)">to-zero</button>
    <div>round</div>
    <div>round</div>
    <div>round</div>
    <div>round</div>
    <div>round</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty('--myvar2', 'round(' + myproperty + ', 24%, 25%)');
            mystyle.setProperty('--myvar3', 'round(' + myproperty + ', 25%, 25%)');
            mystyle.setProperty('--myvar4', 'round(' + myproperty + ', 49%, 25%)');
            mystyle.setProperty('--myvar5', 'round(' + myproperty + ', 50%, 25%)');
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>