Generator de forme de pilule/stadion CSS
Proiectați vizual raza marginii CSS: patru glisoare de colț independente în pixeli sau procente, o comandă rapidă pentru toate colțurile pentru cercuri și pastile instantanee, plus un mod blob organic cu forme aleatorii.
Rezultat
Această pagină deschide generatorul de rază de frontieră cu toate cele patru colțuri legate și împins la o rază foarte mare: 999px. Pe un dreptunghi tipic de dimensiunea unui buton, o rază atât de mare este tăiată de browser până la exact jumătate din înălțimea cutiei, ceea ce produce forma de pilule complet rotunjită sau de stadion, mai degrabă decât un pătrat cu colțuri ușor rotunjite.
Acesta este motivul pentru care butoanele de pilule nu au nevoie de o valoare precisă a razei ajustată la înălțimea fiecărui buton - orice număr mai mare de jumătate din înălțime oferă rezultatul tăiat identic, motiv pentru care 999px (sau chiar 9999px) a devenit prescurtarea comunității informale pentru „round this all the way” în CSS.
Redimensionați caseta în propriul aspect și aceeași dimensiune de 999px continuă să producă o pastilă completă la orice înălțime, deoarece browserul se aprinde întotdeauna la jumătatea casetei automat. Copiați CSS-ul odată ce arată corect sau deconectați colțurile pentru a construi o capsulă asimetrică.