Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

Синтаксис функции round

round(<число> [<режим> [<кратность>]])
  • <число> — значение, которое вы хотите округлить.
  • <режим> — способ округления: nearest (по умолчанию), up, down, to-zero, to-nearest.
  • <кратность> — кратность, до которой будет происходить округление (например, 10px, 5%).

Округление до ближайшего кратного (nearest)

width: round(47px, 10px);

В этом примере значение 47px будет округлено до ближайшего кратного 10px. В данном случае получится 50px, так как 50 ближе к 47, чем 40.

Такой подход удобен, если вы хотите, чтобы размеры элементов подстраивались под удобные значения без дробных пикселей, сохраняя при этом общую гармонию макета.

Округление вверх (up)

width: round(47px up 10px);

Здесь значение 47px округляется вверх до ближайшего кратного 10px. Результат — 50px.

Округление вверх пригодится там, где важно избежать «сжатия» содержимого — например, для кнопок или контейнеров с текстом, где критично, чтобы размер был не меньше заданного.

Округление вниз (down)

width: round(47px down 10px);

Такое выражение даст результат 40px, так как значение округлится вниз до ближайшего кратного 10px.

Применяется, если важен контроль за тем, чтобы элемент не вылезал за пределы контейнера. Например, для встраиваемых картинок или иконок в адаптивных блоках.

Округление к нулю (to-zero)

left: round(-47px to-zero 10px);

Результат: -40px.

Фишка to-zero в том, что значение будет округлено по направлению к нулю. Если число положительное — вниз, если отрицательное — вверх по модулю. Этот режим особенно полезен для позиционирования: например, чтобы сдвигать элементы только на строго заданные шаги, не залезая слишком далеко в минусовые или плюсовые области.

Округление к ближайшему (to-nearest)

top: round(53px to-nearest 10px);

Здесь 53px округляется до 50px, потому что это ближайшее число, кратное 10.

Округление процентов

width: round(23% up 5%);

Результат: 25%.

Округление процентов работает так же, как с пикселями. Особенно полезно для адаптивной верстки и сеток с долями ширины — когда хочется округлять пропорции без дробных процентов.

Округление в сочетании с calc ()

width: round(calc(100% / 3) down 1px);

Этот вариант показывает, как округлять результат сложных вычислений. Здесь итоговая ширина блока делится на три, а потом округляется вниз до целого пикселя. Отличный способ избежать субпиксельных багов в сетках.

Фактически функция round() делает код чище и позволяет отказаться от костылей с JS, лишних расчётов или сложных вложенных calc(). Особенно актуально при построении гибких сеток, позиционировании элементов без дробных значений или для создания аккуратных адаптивных блоков без лишних просчетов.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Псевдоклассы валидации форм: делаем интерфейсы понятнее

Псевдоклассы валидации форм: делаем интерфейсы понятнее

Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.

Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.

Читать дальше
CSS
  • 15 августа 2025
Как сделать первую букву абзаца большой — буквица через ::first-letter

Как сделать первую букву абзаца большой — буквица через ::first-letter

Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.

Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.

Читать дальше
CSS
  • 12 августа 2025
Лигатуры в CSS: как сделать текст аккуратнее

Лигатуры в CSS: как сделать текст аккуратнее

Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

Читать дальше
CSS, Это база
  • 9 августа 2025
CSS-селекторы. Шпаргалка для новичков

CSS-селекторы. Шпаргалка для новичков

Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.

Читать дальше
CSS
  • 8 августа 2025
CSS-градиенты в oklch

CSS-градиенты в oklch

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

Читать дальше
CSS
  • 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов

CSS :has() — проверка наличия потомков или соседних элементов

Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.

Читать дальше
CSS
  • 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

Читать дальше
CSS
  • 5 августа 2025
Всё самое важное о псевдоклассе :default

Всё самое важное о псевдоклассе :default

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Читать дальше
CSS
  • 4 августа 2025
Как работает единица измерения em в CSS

Как работает единица измерения em в CSS

Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Читать дальше
CSS
  • 30 июля 2025
Как найти пустые элементы в CSS

Как найти пустые элементы в CSS

Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.

Читать дальше
CSS
  • 29 июля 2025