CSS хапче / Генератор на форма на стадион
Проектирайте CSS border-radius визуално: четири независими ъглови плъзгача в пиксели или проценти, пряк път за свързване на всички ъгли за незабавни кръгове и хапчета, плюс органичен режим на петна с произволни форми.
Резултат
Тази страница отваря генератора на радиус на границата с четирите ъгъла, свързани и избутани до много голям радиус: 999px. В типичен правоъгълник с размер на бутон толкова голям радиус се изрязва от браузъра до точно половината от височината на кутията, което създава напълно закръглена форма на хапче или стадион, а не квадрат с леко заоблени ъгли.
Ето защо бутоните за хапчета не се нуждаят от точна стойност на радиуса, настроена към височината на всеки бутон — всяко число, удобно по-голямо от половината от височината, дава идентичен изрязан резултат, което също е причината 999px (или дори 9999px) да се превърна в неофициална стенограма на общността за „заобиколете това докрай“ в CSS.
Преоразмерете кутията според вашето собствено оформление и същите 999px продължават да произвеждат пълно хапче на всяка височина, тъй като браузърът винаги автоматично изрязва половината кутия. Копирайте CSS, след като изглежда правилно, или развържете ъглите, за да изградите вместо това асиметрична капсула.