Less.js Math round() Function

Last Updated : 28 Apr, 2025

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is an extension to normal CSS which basically enhances the abilities of normal CSS and gives superpowers to it. LESS.js provides the built-in Math function that can be used to customize the CSS properties, which helps to enhance the overall user experience.

In this article, we are going to discuss the Less.js Math round() Function. This math round() function is used to round off the given number to its nearest integer. This also helps us to round off the integer to the number of decimal places.

Syntax:

round(number)

Parameter: This function accepts a single parameter:

number: It accepts a floating point number and returns an integer type value.

Return Value: This function returns a result after rounding the number passed as a parameter to the function.

Compile LESS code into CSS code

Below are some examples that illustrate the Less.js Math round() Function:

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Less.js Math round() Function</title>
    <link rel="stylesheet" href="gfgstyles.css">
</head>

<body>
    <div>
        <h1 class="gfg">
            GeekforGeeks
        </h1>
        <h2>
            Less.js | Math round() Function
        </h2>
        <p class="font-without-round p">
            Font Size without round function
        </p>
        <p class="font-with-round p">
            Font Size with round function
        </p>
    </div>
</body>

</html>

style.less

body {
    text-align: center;
}

p {
    font-weight: bold;
}

.gfg {
    color: darkgreen;
}

.font-without-round {
    font-size: 0.7px * 20;
    color: rgb(251, 71, 4);
}

.font-with-round {
    font-size: round(0.7px) * 20;
    color: rgb(87, 219, 57);
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less gfgstyles.css

The compiled CSS file comes to be:

gfgstyles.css

body {
    text-align: center;
}

p {
    font-weight: bold;
}

.gfg {
    color: darkgreen;
}

.font-without-round {
    font-size: 14px;
    color: #fb4704;
}

.font-with-round {
    font-size: 20px;
    color: #57db39;
}

Output:

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Less.js Math round() Function</title>
    <link rel="stylesheet" href="gfgstyles.css">
</head>

<body>
    <div>
        <h1 class="gfg">
            GeekforGeeks
        </h1>
        <h2>
            Less.js | Math round() Function
        </h2>
        <div>
            <button class="font-without-round p">
                Without round
            </button>
        </div>
        <div>
            <button class="font-with-round p">
                With round
            </button>
        </div>
    </div>
</body>

</html>

style.less

body {
    text-align: center;
}

.p {
    font-weight: bold;
    display: center;
    padding: 5px;
    margin: 5px;
    font-size: 20px;
}

.gfg {
    color: darkgreen;
}

.font-without-round {
    border: solid black .6px * 3;
    color: rgb(251, 71, 4);
}

.font-with-round {
    border: solid black round(1.8px) * 3;
    color: rgb(87, 219, 57);
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less gfgstyles.css

The compiled CSS file comes to be:

gfgstyles.css

body {
    text-align: center;
}

.p {
    font-weight: bold;
    display: center;
    padding: 5px;
    margin: 5px;
    font-size: 20px;
}

.gfg {
    color: darkgreen;
}

.font-without-round {
    border: solid black 1.8px;
    color: #fb4704;
}

.font-with-round {
    border: solid black 6px;
    color: #57db39;
}

Output:

Reference: https://lesscss.org/functions/#math-functions-round

Less.js Math round() Function

SHUBHAMSINGH10

Improve

Article Tags :

Less.js Math round() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?