Скруглять или не скруглять: как выбирать радиус кнопок

Дата публикации: 18.09.2026

У кнопки есть текст, цвет, размер, отступы и состояние при наведении. А ещё у неё есть форма.

На первый взгляд вопрос о форме кажется почти несущественным. Поставить border-radius: 8px, убрать его совсем или сделать кнопку полностью округлой — технически это изменение нескольких символов в CSS. Но визуально эти варианты могут заметно изменить восприятие одного и того же интерфейса.

Возьмём три одинаковые кнопки:

Функционально это один и тот же элемент. Но визуальный характер у трёх вариантов уже разный.

Прямые углы делают форму более геометричной. Небольшое скругление смягчает её, не меняя характер слишком сильно. Полностью округлая кнопка становится самостоятельным визуальным акцентом.

И здесь возникает интересный вопрос: как дизайнеру понять, какой вариант нужен конкретному сайту?

Универсального значения border-radius, которое можно было бы объявить правильным для веб-дизайна, не существует. Более того, даже утверждение «чем современнее сайт, тем сильнее нужно скруглять элементы» не выдерживает проверки: современные интерфейсы используют весь диапазон — от острых углов до полностью округлых компонентов.

Поэтому выбор радиуса — это не вопрос следования одному правилу.

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

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

Есть и другая крайность — попытка объяснить любой радиус простой психологической формулой: квадратные формы якобы говорят о строгости, круглые — о дружелюбии, а pill-кнопки — о современности. В реальном интерфейсе всё сложнее. Пользователь воспринимает не отдельный border-radius, а всю систему одновременно.

Поэтому в этой статье разберём скругление не как модный CSS-приём, а как один из инструментов визуального проектирования интерфейса.

Посмотрим, что именно меняет радиус, как он соотносится с размером компонента, когда отсутствие скругления работает лучше, зачем интерфейсам разные радиусы, почему pill-кнопки стали настолько распространёнными и где заканчиваются реальные UX-эффекты и начинаются дизайнерские мифы.

А главное — попробуем сформулировать практический способ принимать это решение на реальном проекте, когда перед дизайнером нет готового UI-kit и никто не говорит, что здесь должно быть ровно 8px.

Что на самом деле меняет скругление

Если посмотреть на кнопку только как на интерфейсный компонент, изменение радиуса кажется незначительным. Размер тот же, текст тот же, цвет тот же, положение на странице не изменилось. Меняется только геометрия углов.

Но именно эта небольшая деталь заметно влияет на характер формы.

Попробуем убрать всё лишнее и оставить только геометрию. Ниже — три одинаковые кнопки. У них одинаковые высота, ширина, шрифт и цвет. Единственное различие — радиус.

Функционально между этими кнопками нет никакой разницы. Но визуально они воспринимаются по-разному.

У прямоугольной кнопки углы совпадают с общей геометрией страницы. Она выглядит максимально нейтрально и не пытается смягчить собственную форму.

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

При большом радиусе меняется уже не только угол. Меняется характер самого элемента. Граница начинает восприниматься как более мягкая и округлая, а при border-radius, близком к половине высоты кнопки, прямоугольник фактически превращается в капсулу.

Это хорошо показывает важную вещь: радиус не имеет самостоятельного визуального значения.

8 px — не просто «умеренное скругление». Его восприятие зависит от размера самого элемента.

Например, если высота кнопки составляет 32 px, радиус 8 px занимает четверть её высоты. Если высота составляет 64 px, те же 8 px визуально значительно менее выражены.

Поэтому выбирать радиус только по абсолютному числу — не очень полезный подход. Один и тот же border-radius может выглядеть совершенно по-разному на разных компонентах.

Радиус меняет не только углы

Есть ещё одна причина, по которой скругление так заметно влияет на интерфейс.

У прямоугольника с острыми углами визуальная масса распределена иначе, чем у той же фигуры со скруглёнными углами. При увеличении радиуса часть углов буквально исчезает из силуэта.

В результате граница элемента начинает восприниматься менее резко.

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

Поэтому скругление стоит рассматривать не только как характеристику отдельной кнопки. Это один из способов управлять общей геометрией интерфейса.

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

Контент не изменился. Но второй интерфейс будет восприниматься иначе просто из-за формы его компонентов.

Скругление создаёт визуальную иерархию

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

Например, небольшой радиус у кнопок и более крупный у больших контейнеров может создавать ощущение вложенности:

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

Поэтому вполне нормально, когда кнопка имеет 6 px, карточка 12 px, а крупный промо-блок 20 px.

Это не означает, что дизайнер нарушил принцип единообразия. Наоборот, такая разница может быть частью единой системы.

Проблема возникает не из-за разных радиусов как таковых, а из-за отсутствия логики между ними.

Но скругление не делает элемент автоматически лучше

Здесь легко попасть в распространённую ловушку.

Когда дизайнер видит интерфейс с аккуратными округлыми компонентами, возникает ощущение, что добавление border-radius само по себе делает интерфейс более современным и качественным.

Это не так.

Если структура страницы плохая, типографика не работает, элементы плохо выровнены, а интерактивные состояния не продуманы, радиус ничего не исправит.

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

Поэтому вопрос должен звучать не «какой радиус красивее?», а «какую роль эта форма должна выполнять в данном интерфейсе?»

Именно с этого начинается осознанный выбор скругления.

Почему круглые формы воспринимаются иначе

Круглые и угловатые формы действительно воспринимаются по-разному. Но популярная формула «круглое = дружелюбное, квадратное = строгое» слишком упрощает ситуацию.

Форма влияет на визуальный характер элемента, но не определяет его восприятие самостоятельно. Пользователь одновременно считывает цвет, типографику, размер, плотность интерфейса, композицию и контекст.

Поэтому одна и та же кнопка с border-radius: 12px может выглядеть совершенно по-разному в двух проектах.

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

Откуда берутся эти ассоциации

Часть восприятия форм связана с самой геометрией, но большая часть привычных UI-ассоциаций формируется нашим опытом.

Мы постоянно видим округлые элементы в мобильных интерфейсах, consumer-сервисах, тегах, аватарах и различных интерактивных компонентах. Прямоугольная геометрия, в свою очередь, часто встречается в интерфейсах с высокой информационной плотностью, профессиональных инструментах и технических системах.

Со временем эти паттерны становятся знакомыми.

Поэтому правильнее говорить не:

«Скруглённая кнопка вызывает доверие».

А:

«Скругление формирует определённый визуальный характер, который пользователь интерпретирует вместе с остальными элементами интерфейса».

Это принципиальная разница.

Не стоит превращать радиус в психологический триггер

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

Такие формулировки звучат убедительно, но для практической работы они слишком категоричны. Нельзя взять конкретный border-radius и гарантированно получить определённую эмоциональную реакцию пользователя.

Гораздо полезнее использовать форму как часть арт-дирекшна интерфейса.

Если сайт построен на строгой сетке, технической типографике и геометричной графике, отсутствие скругления или небольшой радиус могут поддержать этот характер.

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

То есть радиус не должен отвечать за «дружелюбие» или «серьёзность» сайта в одиночку.

Он должен поддерживать характер всей системы.

0, 4, 8, 12, 16, 24 px — где заканчивается «слегка» и начинается «сильно»

Само число в border-radius ещё ничего не говорит о том, как будет выглядеть элемент. Один и тот же радиус по-разному воспринимается на кнопке высотой 40 px, карточке высотой 200 px и большом контейнере.

Например, на кнопке высотой 40 px разница между 0 и 4 px почти незаметна, 8 px уже явно смягчает форму, а 16–20 px делают её визуально очень округлой. При этом на высокой карточке те же 16 px могут выглядеть довольно сдержанно.

Поэтому радиус лучше воспринимать не как абсолютное значение, а в связи с размером элемента.

Условная шкала

Для демонстрации можно взять одну и ту же кнопку и менять только border-radius:

• 0 px — полностью прямые углы;
• 4 px — едва заметное смягчение;
• 8 px — явно скруглённая форма;
• 12 px — заметное округление;
• 16 px — мягкая, достаточно округлая форма;
• 20 px и выше — форма начинает приближаться к pill.

Это не универсальная шкала «от плохого к хорошему». Она показывает, насколько сильно радиус вмешивается в геометрию элемента.

Здесь хорошо видно важный момент: у кнопки высотой 40 px радиус 20 px уже достигает половины её высоты. Дальнейшее увеличение значения практически не меняет форму — элемент начинает выглядеть как капсула.

Именно поэтому следующий вопрос логичнее формулировать не как «какой радиус выбрать?», а как «какое соотношение радиуса и размера элемента нужно получить?»

Радиус относительно размера элемента

После предыдущего примера становится понятно, почему нельзя выбирать радиус только по числу. Один и тот же 8px может выглядеть совершенно по-разному в элементах разного размера.

Условно можно смотреть на соотношение радиуса к высоте элемента:

R / H

где R — радиус, а H — высота элемента.

Например, для кнопки высотой 40 px:

• 4 px — R/H = 0,1: углы почти прямые;
• 8 px — 0,2: скругление уже хорошо заметно;
• 12 px — 0,3: форма становится мягкой;
• 20 px — 0,5: радиус достигает половины высоты, и кнопка превращается в капсулу.

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

Особенно это важно при масштабировании компонентов. Если кнопка имеет высоту 40 px и радиус 12 px, а затем появляется такая же кнопка высотой 56 px с тем же радиусом, визуальная степень округления уже будет другой.

Поэтому в дизайн-системе лучше задавать не только набор значений вроде 4 / 8 / 12 / 16 px, но и понимать, для элементов какого масштаба эти значения предназначены.

При этом есть ещё одна важная граница: радиус может быть связан не только с размером самого элемента, но и с радиусами окружающих его элементов. Именно здесь появляется вопрос визуальной иерархии.

Небольшая демонстрация

Здесь значение одинаковое — 12px, но характер скругления различается именно из-за высоты кнопки.

Когда отсутствие скругления работает лучше

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

border-radius: 0 хорошо работает там, где геометрия должна быть заметной частью визуального языка. Прямоугольник подчёркивает границы, сетку, выравнивание и структуру композиции. Поэтому он естественно сочетается с минималистичным, редакционным, техническим или брутальным дизайном.

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

При этом полностью прямые углы не означают, что весь сайт должен состоять из прямоугольников. Можно оставить карточки и контейнеры прямыми, а небольшое скругление использовать только для отдельных интерактивных элементов. Или наоборот — сделать геометрию всего интерфейса прямоугольной и вообще отказаться от радиуса.

Главное здесь — не считать 0px отсутствием дизайна. Это тоже осознанное геометрическое решение.

Один и тот же интерфейс с разным характером

Здесь важно сравнивать не «красивый» и «некрасивый» вариант, а два разных визуальных характера одной композиции. Именно так на радиус стоит смотреть при работе над реальным проектом.

Когда небольшое скругление работает лучше

Между полностью прямым углом и выраженно округлой формой есть большая рабочая зона — небольшие радиусы вроде 4–8 px.

Такое скругление сохраняет прямоугольную геометрию элемента, но убирает визуальную резкость углов. Поэтому оно часто хорошо подходит интерфейсам, где не хочется ни подчёркнуто строгой геометрии, ни выраженной «мягкости».

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

Здесь есть важный нюанс: небольшой радиус лучше оценивать не отдельно, а вместе с остальными параметрами. Один и тот же 6 px будет выглядеть по-разному в кнопке высотой 32 px и в большой карточке высотой 300 px. Поэтому небольшое скругление — это не конкретное число, а визуальная степень округления относительно масштаба элемента.

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

При этом нет необходимости использовать его абсолютно везде. Например, кнопки и поля могут иметь 6–8 px, а крупные контейнеры — 0 или 16–24 px. О том, как такие разные радиусы могут сосуществовать в одной системе, поговорим отдельно.

Когда большое скругление действительно имеет смысл

Большой радиус становится заметной частью формы. Но его восприятие сильно зависит от размера элемента.

На небольшой кнопке 24px уже почти превращают прямоугольник в капсулу. На крупной карточке те же 24px могут выглядеть достаточно сдержанно. Поэтому одно и то же значение нельзя оценивать вне контекста размера.

Посмотрим на это на практике.

В этом примере 24px везде одинаковы, но визуальный эффект совершенно разный. Поэтому большой радиус имеет смысл выбирать не по принципу «24 px — это современно», а исходя из масштаба элемента и роли, которую он играет в композиции.

И я бы после этой секции уже переходил к pill-кнопкам — там как раз хорошо показать, что border-radius: 999px — это не просто «очень большое скругление», а отдельный визуальный паттерн.

Pill-кнопки: когда радиус становится формой

Pill — это элемент, у которого скругление достигает примерно половины его высоты. В CSS для этого часто используют border-radius: 999px, но само число здесь условно: браузер ограничивает радиус геометрией элемента.

В результате прямоугольная кнопка превращается в капсулу. Это уже заметно меняет её визуальный характер по сравнению даже с радиусом 12–16 px.

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

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

Поэтому pill лучше воспринимать не как «самый современный вариант кнопки», а как конкретный паттерн, у которого должно быть основание в общей системе дизайна.

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

Должны ли все элементы сайта иметь одинаковый радиус?

Нет. Единый радиус для всех элементов — только один из возможных подходов.

Если задать 12px одновременно контейнерам, карточкам, изображениям, кнопкам и полям, интерфейс действительно будет выглядеть последовательно. Но эта последовательность может оказаться слишком механической: все элементы получают одинаковый визуальный вес независимо от своей роли и масштаба.

Гораздо интереснее работает система, в которой радиусы связаны между собой.

Например, крупный внешний контейнер может иметь 24px, карточка внутри него — 16px, изображение — 12px, а кнопка — 8px. При этом элементы не выглядят случайным набором форм: меньшие радиусы поддерживают более крупные уровни композиции.

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

Иерархия радиусов

Здесь используется последовательность 24 → 16 → 12 → 8 px. Она показывает не правило, а сам принцип: радиус может участвовать в визуальной иерархии интерфейса.

При этом важно не превратить это в математическую систему радиусов ради самой системы. Если для конкретного проекта лучше работает 24 → 16 → 16 → 16, это вполне допустимо.

Как построить систему радиусов

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

Например, система может выглядеть так:

• 0 px — элементы с прямой геометрией;
• 8 px — небольшие интерактивные элементы;
• 12 px — кнопки, поля и небольшие карточки;
• 16 px — основные карточки;
• 24 px — крупные контейнеры и промо-блоки;
• 999 px — pill-компоненты.

Но это не готовая шкала, которую нужно копировать в каждый проект. В другом интерфейсе достаточно трёх значений: 0 / 8 / 16. В минималистичном проекте может использоваться только один радиус. А иногда система вообще строится вокруг прямых углов.

Главное — определить несколько ролей, а не несколько случайных чисел.

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

контейнер → карточка → кнопка

24px → 16px → 8px

При этом стоит проверить систему на реальных страницах. Радиусы, которые хорошо выглядят на одном hero-блоке, могут оказаться слишком крупными для таблиц, форм или плотного каталога.

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

Практическая проверка

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

Например, система 24 → 16 → 12 → 8 px создаёт заметную визуальную иерархию: крупные элементы имеют более мягкую форму, а небольшие компоненты остаются более собранными.

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

Могут ли разные типы скругления сосуществовать на одном сайте?

Да. Более того, разные радиусы могут быть частью одной системы, если у них есть понятная роль.

Например, крупный промо-блок может иметь радиус 24 px, карточка внутри него — 16 px, изображение — 12 px, а кнопка — 8 px. При этом интерфейс не выглядит противоречивым, потому что значения связаны между собой и соответствуют масштабу элементов.

Например:

24 px — крупный промо-блок
16 px — карточка
12 px — изображение
8 px — кнопка

Необязательно использовать только одну шкалу. На одном сайте могут одновременно существовать прямые углы, небольшие скругления и pill-элементы. Важно не само различие, а то, чтобы оно было осмысленным.

Проблемы начинаются тогда, когда радиусы появляются случайно: одна карточка получает 20 px, другая 12 px, третья 6 px, а кнопки на разных страницах используют ещё несколько значений без понятной причины.

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

24 px → 16 px → 12 px → 8 px → 999 px

Здесь хорошо видно, что разные радиусы не конфликтуют, потому что каждый соответствует своему уровню и роли.

Скругление и affordance

Скругление может влиять на то, как пользователь воспринимает элемент, но само по себе оно не делает его интерактивным.

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

Поэтому форма работает вместе с другими визуальными признаками. Пользователь определяет интерактивность элемента по совокупности факторов: контрасту, тексту, положению, размеру, состояниям при наведении и нажатии, а также контексту.

Например, одинаково скруглённые карточка и кнопка могут иметь совершенно разное назначение:

Карточка — поверхность для размещения информации
Кнопка — элемент управления действием

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

Хороший интерфейс использует форму как один из сигналов, а не как единственный способ сообщить пользователю, с чем можно взаимодействовать.

Одинаковый радиус — разное назначение. Скругление является только одним из визуальных сигналов интерактивности.

Скругление ≠ удобство

Скругление может влиять на визуальное восприятие элемента, но само по себе не делает интерфейс удобнее.

Даже идеально подобранный радиус не компенсирует слишком маленькую область нажатия, слабый контраст, неудобный размер текста, тесные отступы или отсутствие понятного состояния при наведении и нажатии.

При проектировании интерактивных элементов поэтому стоит отдельно смотреть на несколько вещей:

Размер области нажатия — элемент должен быть достаточно крупным для точного взаимодействия
Контраст — текст и элементы управления должны хорошо различаться с фоном
Типографика — текст должен легко читаться и не требовать лишнего напряжения
Отступы — между элементами должно оставаться достаточно пространства
Состояния — пользователь должен понимать, что элемент доступен для взаимодействия и что действие произошло

Радиус отвечает только за форму. Удобство складывается из гораздо большего количества параметров.

Например, большая кнопка с радиусом 0 px может быть удобнее маленькой pill-кнопки с радиусом 999 px. Поэтому выбирать скругление только по принципу «круглое удобнее» неправильно.

Одинаковый радиус — разная удобность.

Здесь у обеих кнопок 12 px, но удобство определяется не скруглением, а размером, контрастом и количеством доступного пространства для взаимодействия.

Как выбрать радиус для реального проекта

На практике не обязательно начинать с готовой шкалы вроде 0 / 4 / 8 / 12 / 16 / 24 px. Проще сначала посмотреть на сам интерфейс и определить его характер.

Можно двигаться от крупных элементов к мелким:

1. Общая геометрия — будут ли в интерфейсе преобладать прямые углы, мягкие скругления или выраженно округлые формы.

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

3. Основные компоненты — карточки, поля, кнопки, элементы навигации.

4. Мелкие элементы — теги, бейджи, переключатели и другие компактные компоненты.

После этого стоит проверить несколько реальных экранов. Радиус, который хорошо выглядит на одном hero-блоке, может оказаться слишком крупным в каталоге или форме.

Важно смотреть не только на отдельные элементы, но и на их сочетание. Если крупная карточка имеет радиус 24 px, а расположенная внутри неё кнопка — 8 px, это может выглядеть естественно. Но если рядом другая карточка неожиданно получает 18 px, а третья — 6 px, система начинает выглядеть случайной.

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

Визуальное сравнение: как меняется интерфейс при разном радиусе

До этого мы рассматривали радиус отдельно: его величину, отношение к размеру элемента и место в системе. Но в реальном интерфейсе разница особенно хорошо заметна, когда сравнивать несколько вариантов рядом.

Условно можно выделить несколько характерных подходов:

0 px — прямая геометрия, углы остаются полностью выраженными.

4–6 px — минимальное смягчение формы, при котором прямоугольная геометрия практически сохраняется.

8–12 px — хорошо заметное скругление, которое уже становится частью визуального характера интерфейса.

16–24 px — выраженно мягкая форма, особенно заметная на небольших компонентах.

50% / 999 px — pill-форма, при которой элемент превращается в капсулу.

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

Ниже — несколько вариантов одной и той же кнопки. Так проще увидеть, где заканчивается обычное скругление и начинается уже другая форма.

Здесь особенно хорошо видно, что переход от 0 к 4 px почти не меняет геометрию, 8–16 px уже заметно меняют характер формы, а pill фактически становится отдельным визуальным паттерном.

Скругление — это часть визуальной системы

У border-radius нет универсального правильного значения. Нулевой радиус, небольшое скругление, крупные радиусы и pill-форма могут одинаково хорошо работать — вопрос в том, какую геометрию и визуальный характер должен получить конкретный интерфейс.

При выборе радиуса стоит учитывать не только само число, но и размер элемента, его роль, соседние компоненты и общую плотность интерфейса. 8 px на небольшой кнопке и 8 px на крупной карточке — это визуально разные решения.

Хорошая система радиусов не обязательно состоит из большого количества значений. Иногда достаточно 0 / 8 / 16 px, а иногда весь интерфейс может строиться вокруг одного радиуса. Важно, чтобы значения были связаны с ролями элементов и повторялись там, где это действительно оправдано.

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

Поэтому вместо вопроса «какой радиус сейчас в тренде?» полезнее задать другой: какую форму должен иметь этот интерфейс и почему?

Радиус — не декоративная настройка и не универсальное значение из дизайн-системы. Это часть геометрии интерфейса.

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

Хороший результат получается не тогда, когда все элементы получают одинаковый border-radius, а когда выбранные формы работают как единая визуальная система.