Klíčové poznatky
- 01Tři režimy — jednotné, po jednotlivých rozích a eliptické — pokrývají vše od jednoduchých zaoblených tlačítek až po organické blob tvary.
- 02Podporuje jednotky px, %, a rem, z nichž každá má jiné chování škálování.
- 03Eliptický režim odhaluje horizontální a vertikální poloměry na roh pro kompletní border-radius syntaxi CSS.
- 04Živý náhled používá skutečnou CSS vlastnost, takže to, co vidíte, je přesně to, co váš prohlížeč vykreslí.
Od jednoduchých zaoblených rohů k organickým blob tvarům
Čtyřrohová border-radius hodnota je dostatečně jednoduchá na zadání z paměti — border-radius: 8px. Ale jakmile potřebujete různé poloměry na roh nebo chcete CSS eliptickou syntaxi pro organické tvary, zkratka se rychle stane kryptickou. Úplná forma je top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — osm hodnot v určitém pořadí.
Generátor border-radius od Handytoolu vám umožní přetáhnout posuvníky pro každý roh v jakémkoliv režimu a vidět tvar aktualizovaný v reálném čase. Přepínejte mezi px, % a rem bez přepočítávání a kopírujte správný zkrácený nebo dlouhý formát CSS deklarace, když jste hotovi.
Jak navrhnout border-radius
- 01
Zvolte režim
Jednotný režim aplikuje jeden poloměr na všechny čtyři rohy. Režim po jednotlivých rozích řídí každý roh nezávisle. Eliptický režim přidává samostatný horizontální a vertikální poloměr na roh.
- 02
Zvolte jednotku
Vyberte px pro absolutní velikosti, % pro hodnoty, které se škálují s rozměry prvku, nebo rem pro velikosti vázané na kořenovou velikost písma.
- 03
Přetáhněte posuvníky
Upravte hodnoty poloměru a sledujte aktualizaci prvku náhledu v reálném čase. V režimu po jednotlivých rozích přetáhněte posuvník každého rohu nezávisle.
- 04
Zobrazte tvar
Pole náhledu aplikuje skutečnou CSS vlastnost border-radius, takže tvar, který vidíte, je tvar, který váš prohlížeč vykreslí.
- 05
Zkopírujte CSS
Klikněte na Kopírovat a popadněte deklaraci border-radius a vložte ji do stylů.
Běžné tvary a kdy použít který režim
- 01Tlačítko Pill: jednotný % režim, nastavte na 50% — vždy plné pilulky bez ohledu na šířku tlačítka
- 02Karta s jemným zaoblením: jednotný px režim, 8–16px — nejčastější UI vzor
- 03Asymetrické označení nebo štítek: režim po jednotlivých rozích, ostrý na jedné straně, zaoblený na druhé
- 04Avatar kruh: jednotný % režim, 50% — škáluje se s kontejnerem obrázku
- 05Organický blob tvar: eliptický režim s různými hodnotami X/Y na roh
Okamžitý náhled, nic není nahráno
Generátor border-radius je zcela na straně klienta. Posuvníky, přepínače režimu a změny jednotek všechny aktualizují náhled okamžitě bez roundtrip serveru. Není zde účet a není zde omezení četnosti.
Nástroj funguje across všemi moderními prohlížeči. Vlastnost border-radius — včetně eliptické syntaxe X/Y — je podporována v každé evergreen verzi Safari, Firefox, Edge a Chrome, takže výstup je bezpečný na použití bez vendor prefixů nebo fallback.
Časté otázky k Generátoru Border-Radius
Jaký je rozdíl mezi px a % pro border-radius?
Pixelové poloměry jsou absolutní — 16px je vždy 16px. Procentuální poloměry jsou relativní k rozměrům prvku, takže 50% vytvoří dokonalý kruh na čtvercové krabici a elipsu na obdélníku.
Kdy bych měl použít eliptický režim?
Použijte eliptický režim, když chcete roh, který se více vyboulí na jedné ose — pro horizontální pilulku, tvar listu nebo organický blob. CSS to vyjadřuje jako X-poloměry / Y-poloměry v zkratce border-radius.
Proč vypadá můj procentuální poloměr špatně na nečtvercovém poli?
Horizontální procenta jsou relativní k šířce prvku; vertikální procenta k jeho výšce. Na širokém, krátkém prvku se rohy rozšíří do elips spíše než do kruhových oblouků.
Funguje výstup v každém prohlížeči?
Ano — border-radius včetně eliptické syntaxe je podporován v každém moderním prohlížeči: všechny evergreen verze Safari, Firefox, Edge a Chrome. Nejsou potřeba vendor prefixy.
Jak vytvořím dokonalý kruh s border-radius?
Nastavte všechny rohy na 50% v procentuálním režimu na čtvercovém prvku. Prvek také potřebuje stejnou šířku a výšku — použijte aspect-ratio: 1 / 1, pokud je velikost dynamická.