CodeKitHubČo je tento nástroj?
border-radius je CSS vlastnosť, ktorá zaobľuje rohy elementu. Napísaná ručne vyžaduje štyri hodnoty v pevnom poradí — vľavo hore, vpravo hore, vpravo dole, vľavo dole — čo sa dá ľahko popliesť, najmä keď sú všetky štyri rohy rôzne.
Tento nástroj odstraňuje hádanie: posuňte posuvník, sledujte zaoblenie rohu v živom náhľade a prečítajte si presné CSS z generovaného kódu. Jedno prepínacie tlačidlo zamknutia prepína medzi rovnomerným polomerom (všetky štyri rohy rovnaké, najbežnejší prípad) a štyrmi nezávislými posuvníkmi pre organické, asymetrické tvary.
Prečo ho používať?
- Živý náhľad sa aktualizuje okamžite pri ťahaní — žiadne upravovanie CSS a obnovovanie stránky, aby ste videli výsledok.
- Jedno kliknutie na zamknutie pre bežný prípad „rovnaký polomer na každom rohu“; odomknite pre pilulkové tlačidlá, bubliny reči a tvary kvapiek.
- Vygeneruje skrátenú jednohodnotovú formu, keď sa všetky rohy zhodujú, alebo plnú štvorhodnotovú formu, keď sa nezhodujú — v oboch prípadoch pripravené na kopírovanie.
- Beží celé vo vašom prehliadači. Nič, čo zadáte, sa nikam neodosiela.
- Zadarmo, bez registrácie, funguje na mobile.
Ako sa používa
- Nechajte zaškrtnuté „uzamknúť všetky rohy“ a potiahnite ľubovoľný posuvník, aby ste nastavili jednotný polomer pre celý box.
- Odškrtnite zámok, aby ste ovládali každý roh nezávisle — užitočné pre pilulkové tvary, kvapky a asymetrické karty.
- Sledujte, ako sa náhľadový box aktualizuje naživo pri úprave každého posuvníka.
- Skopírujte vygenerované CSS z poľa kódu a vložte ho do svojho štýlu.
Príklad
Vstup
Vľavo hore: 40px, Vpravo hore: 8px, Vpravo dole: 40px, Vľavo dole: 8pxVýstup
border-radius: 40px 8px 40px 8px;Nezhodné protiľahlé rohy ako v tomto prípade vytvárajú siluetu listu alebo lupienka — bežný efekt v dizajne kariet a odznakov.
px alebo % — akú jednotku použiť?
Tento generátor vypisuje hodnoty v pixeloch, čo je pre väčšinu UI práce správna predvoľba: tlačidlá, karty a vstupné polia, kde chcete pevný, predvídateľný polomer rohu bez ohľadu na veľkosť elementu.
Percentá sa správajú inak — sú relatívne k vlastnej šírke a výške elementu, takže polomer 50 % na štvorcovom elemente vytvorí dokonalý kruh a na neštvorcovom elemente elipsu. Ak chcete tento efekt (avatary, tvary kvapiek škálujúce sa s kontajnerom), vezmite vygenerované CSS a ručne zameňte hodnoty px za %-hodnotu — napríklad border-radius: 50% zmení akýkoľvek štvorcový box na kruh.
Bežné vzory border-radius
- Zaoblená karta: všetky rohy rovnaké, približne 8–16px pre UI komponenty.
- Pilulkové tlačidlo: nastavte polomer na polovicu výšky elementu (alebo jednoducho použite 9999px, ktoré sa vždy orezú na plný pilulkový tvar bez ohľadu na výšku).
- Kruhový avatar: border-radius: 50% na štvorcovom (rovnaká šírka a výška) elemente.
- Bublina reči: tri rohy zaoblené, jeden ostrý — nastavte tri posuvníky vysoko a jeden na 0.
- List / lupienok: protiľahlé rohy zhodné, susedné rohy rôzne — napríklad vľavo hore aj vpravo dole veľké, vpravo hore aj vľavo dole malé.
Kombinácia s tieňom
Zaoblené rohy sa málokedy objavia samostatne — karty, tlačidlá a modálne okná zvyčajne potrebujú aj trochu tieňa pre hĺbku. Použite Generátor box-shadow na doladenie tieňa a aplikujte obe vygenerované CSS deklarácie na rovnaký element.
Časté otázky
Aký je rozdiel medzi border-radius a poradím rohov?
CSS skrátený zápis vždy nasleduje poradie vľavo hore, vpravo hore, vpravo dole, vľavo dole, v smere hodinových ručičiek počnúc ľavým horným rohom. Štyri posuvníky tohto nástroja sú označené presne v tomto poradí, takže si ho nikdy nemusíte pamätať.
Môžem použiť rôzne jednotky pre každý roh?
Áno, v skutočnom CSS môžete miešať px, %, em a rem naprieč rohmi, hoci v praxi je to zriedkavé. Tento nástroj kvôli jednoduchosti generuje jednotné hodnoty px — ľubovoľnú hodnotu zmeňte na % alebo inú jednotku priamo vo svojom štýle, ak potrebujete zmiešané jednotky.
Prečo border-radius: 50% niekedy vytvorí ovál namiesto kruhu?
Pretože percentá sú nezávisle relatívne ku každej osi — vodorovný polomer je percento šírky elementu, zvislý polomer percento jeho výšky. Na štvorcovom elemente (rovnaká šírka a výška) to vytvorí dokonalý kruh; na obdĺžniku vytvorí elipsu.
Funguje border-radius aj na obrázky na pozadí a okraje?
Áno — border-radius oreže pozadie elementu, okraj a (v moderných prehliadačoch) jeho box-shadow do zaobleného tvaru. Neoreže obsah potomkov, ktorý presahuje, pokiaľ na rodičovi tiež nenastavíte overflow: hidden.
Existuje limit, aký veľký môže byť polomer?
Žiadny pevný limit — ak polomer presiahne polovicu šírky alebo výšky elementu, prehliadače ho orežú tak, aby sa dve krivky na danej strane stretli presne v strede, čím sa napríklad štvorec zmení na dokonalý kruh alebo pilulkový tvar.
Ako vytvorím pilulkový tvar alebo dokonalý kruh?
Pre pilulkový (kapsulový) tvar nastavte polomer aspoň na polovicu výšky elementu — bežný trik je border-radius: 9999px, ktorý funguje pri akejkoľvek výške, pretože prehliadač krivku automaticky orezáva. Dokonalý kruh potrebuje dve veci: rovnakú šírku a výšku, plus border-radius: 50%.