Генератор CSS-пігулок / форм «Стадіон»
Проєктуйте CSS border-radius візуально: чотири незалежні повзунки для кутів у px або відсотках, швидка дія «Зв’язати всі кути» для миттєвого створення кіл і пігулок, а також режим органічної «Краплі» з випадковими формами.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор border-radius з усіма чотирма кутами, зв’язаними та виставленими на дуже великий радіус: 999px. На типовому прямокутнику розміром з кнопку такий великий радіус обрізається браузером рівно до половини висоти блоку, що й утворює повністю заокруглену форму пігулки або стадіону, а не квадрат зі злегка заокругленими кутами.
Ось чому кнопки-пігулки не потребують точного значення радіуса, підігнаного під висоту кожної кнопки — будь-яке число, зручно більше за половину висоти, дає ідентичний обрізаний результат; саме тому 999px (або навіть 9999px) стало неформальним скороченням спільноти для «заокруглити це повністю» в CSS.
Змініть розмір блоку у власному макеті, і ті самі 999px продовжать створювати повну пігулку за будь-якої висоти, оскільки браузер завжди автоматично обрізає до половини блоку. Скопіюйте CSS, коли вигляд вас влаштує, або розв’яжіть кути, щоб створити асиметричну капсулу.