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