Getting started with the new CSS round() function

Every now and then, CSS drops something new that gets everyone talking — think scroll-driven animations, anchor positioning, or view transitions. These features steal the spotlight, and rightfully so! But at the same time, other little gems quietly make their way into the spec without much noise.

One of those hidden treasures is the CSS round() function. Personally, I’m really excited about it! But I haven’t seen many people using it, let alone writing about it.

So I thought I’d change that. In this post, I’ll walk you through some examples where round() can be super handy — and maybe, by the end, you’ll be just as excited about it as I am.

The basics

The idea behind round() is pretty simple: you have a value that you want to round (called valueToRound), and you tell CSS to round it to the nearest multiple of a roundingInterval.

By default, it’ll round to the closest value — just like you’d expect. But if you want more control, you can specify a rounding strategy like up or down to force it to always round in that direction.

That’s really all you need to get started! If you want to dive into the full syntax details, MDN has a great reference: CSS round() function.

csswidth: round(10.4px, 1px); /* Rounds to 10px */
width: round(10.6px, 1px); /* Rounds to 11px */
width: round(down, 10.8px, 1px); /* Rounds to 10px */

rotate: round(up, 5deg, 90deg); /* Rounds to 90deg */
aspect-ratio: round(down, 2.3, 1); /* Rounds to 2 */

Where round() Proves Its Value

For years we’ve been encouraged to move away from hard-coded pixel values. Tools like Utopia make it straightforward to set up fluid type scales, and CSS offers many responsive units—em, ex, cap, lh, and, of course, viewport and container units. These give us flexible, content-driven sizing, but the browser still converts everything back to pixels. That math can produce fractional results: for example, 0.4rem on a 16 px root size ends up as 6.4 px.

Fractional pixels sometimes lead to visual artifacts, such as a hairline gap between adjacent elements. By passing the value through round(), you keep all the benefits of fluid units while ensuring the final value is a whole pixel—eliminating those subtle layout issues.

csshtml {
  --fluid-font-size: round(clamp(1.6rem, 0.9rem + 3vw, 3rem), 1px);
}

Time for a few quick experiments. I built three small demos to see where round() might come in handy. They’re just proofs of concept, but each one shows a practical way to put round() to work.

Example 1 – Text on a Monospaced Grid

When you set a headline in a monospaced (fixed-width) font you can make its total width always land on an exact multiple of one character unit (1ch). That guarantees the text aligns perfectly with any decorative grid or underline you add later.

See the Pen simple ch rounding by Nils Binder (@enbee81) on CodePen.

After experimenting further to achieve a split-flap look, I found that fluid font sizes can land on fractional pixels, disrupting alignment. Wrapping the clamp() value in round(…, 1px) removes the offset. I added a bit of letter-spacing, and the same increment must be applied to both the round() interval and background-size to maintain the grid.

See the Pen ch-unit-background by Nils Binder (@enbee81) on CodePen.

Example 2 – Baseline Grid

The concept of a baseline grid comes from print typography—John Allsopp’s classic essay “A Dao of Web Design” reminds us that not every print convention belongs on the web, especially on mobile where layouts are often single-column. Still, it’s was a fun exercise to see how round() can help build this.

Most of it is done by using a variable that defines the baseline-height.

css--baseline-unit: round(up, var(--step-0) * 1.6, 1px);

Notice that I already use a round function in here. This variable is then used multiple times. Most importantly to round the line-heights of different font sizes to this value. But also again for the background-size to create the a lined paper look.

See the Pen fluid-fixed-type-system by Nils Binder (@enbee81) on CodePen.

One of the more tricky things here is getting the image to also align on the baseline grid. For this I calculate the height of the image with the help of the image's aspect ratio (provided by inline-styles) and then round this to the closest value that matches the baseline-unit.

Example 3 - Border Image

I’ve always liked the look of carnival and circus marquees, so I set out to build an animated border of light-bulbs with pure CSS. border-image is the obvious choice, but keeping each bulb intact is tricky:

• border-image-repeat: round
  Scales the image to fit, so every bulb gets stretched.

• border-image-repeat: repeat
  Tiles the image as-is, which can leave half bulbs at the corners and edges.

The fix is to let the browser repeat the image normally and instead adjust the element’s dimensions so the tiling area is an exact multiple of one bulb. Wrapping the element’s width and height in round(…, bulb-size) does exactly that: it snaps the marquee’s inner box to the nearest whole bulb, preventing both distortion and clipping.

Oh and yes ... you can totally have a CSS inside an SVG that animates the lightbulbs and then include this in your regular CSS file as data-url.

See the Pen rounded border by Nils Binder (@enbee81) on CodePen.