CodeKitHubMi ez az eszköz?
A border-radius az a CSS tulajdonság, amely lekerekíti egy elem sarkait. Kézzel írva négy értéket vesz fel rögzített sorrendben — bal felső, jobb felső, jobb alsó, bal alsó —, amit könnyű összekeverni, különösen ha a négy sarok eltér egymástól.
Ez az eszköz megszünteti a találgatást: mozgass egy csúszkát, nézd meg a sarok lekerekedését az élő előnézetben, és olvasd le a pontos CSS-t a generált kódmezőből. Egy zárolókapcsoló vált az egységes sugár (mind a négy sarok azonos, a leggyakoribb eset) és a négy független csúszka között organikus, aszimmetrikus formákhoz.
Miért érdemes használni?
- Az élő előnézet azonnal frissül húzáskor — nincs szükség CSS szerkesztésre és frissítésre az eredmény megtekintéséhez.
- Egykattintásos zárolás a gyakori "minden sarkon azonos sugár" esethez; oldd fel kapszula gombokhoz, beszédbuborékokhoz és foltformákhoz.
- Rövidített, egyértékű formát ad ki, ha minden sarok egyezik, vagy a teljes négyértékű formát, ha nem — mindkét esetben másolásra kész.
- Teljes egészében a böngésződben fut. Semmi, amit megadsz, nem kerül elküldésre sehova.
- Ingyenes, regisztráció nélkül, mobilon is működik.
Használati útmutató
- Hagyd bejelölve a "minden sarok zárolása" opciót, és húzz bármelyik csúszkát egy egységes sugár beállításához az egész dobozhoz.
- Vedd le a zárolást, hogy minden sarkot külön szabályozz — hasznos kapszula alakokhoz, könnycsepp formákhoz és aszimmetrikus kártyákhoz.
- Figyeld, ahogy az előnézeti doboz élőben frissül, miközben minden csúszkát állítasz.
- Másold ki a generált CSS-t a kódmezőből, és illeszd be a stíluslapodba.
Példa
Bemenet
Bal felső: 40px, Jobb felső: 8px, Jobb alsó: 40px, Bal alsó: 8pxKimenet
border-radius: 40px 8px 40px 8px;Az ilyen, ellentétes sarkoknál eltérő értékek levél vagy szirom sziluettet hoznak létre — gyakori hatás kártya- és jelvénytervezésnél.
px vagy % — melyik egységet használjam?
Ez a generátor pixel értékeket ad ki, ami a legtöbb UI-munkánál a helyes alapértelmezés: gombok, kártyák és beviteli mezők esetén, ahol fix, kiszámítható sarokátmérőt szeretnél az elem méretétől függetlenül.
A százalékok másképp viselkednek — az elem saját szélességéhez és magasságához viszonyítanak, így egy négyzet alakú elemen az 50%-os sugár tökéletes kört eredményez, egy nem négyzet alakú elemen pedig ellipszist. Ha ezt a hatást akarod (avatarok, a konténerrel skálázódó folt formák), vedd a generált CSS-t, és cseréld ki kézzel a px értékeket % értékre — például a border-radius: 50% bármely négyzet dobozt körré alakít.
Gyakori border-radius minták
- Lekerekített kártya: minden sarok egyenlő, nagyjából 8–16px UI komponensekhez.
- Kapszula gomb: állítsd a sugarat az elem magasságának felére (vagy egyszerűen használj 9999px-et, ami magasságtól függetlenül teljes kapszulára korlátozódik).
- Kör alakú avatar: border-radius: 50% egy négyzet alakú (egyenlő szélességű és magasságú) elemen.
- Beszédbuborék: három sarok lekerekítve, egy éles — állíts három csúszkát magasra, egyet pedig 0-ra.
- Levél/szirom forma: ellentétes sarkok megegyeznek, szomszédos sarkok eltérnek — pl. a bal felső és jobb alsó egyaránt nagy, a jobb felső és bal alsó egyaránt kicsi.
Párosítás árnyékkal
A lekerekített sarkok ritkán fordulnak elő önmagukban — a kártyáknak és gomboknak általában némi árnyékra is szükségük van a mélységérzethez. Használd a Box Shadow Generátort egy vetett árnyék beállításához, majd alkalmazd mindkét generált CSS-deklarációt ugyanarra az elemre.
Gyakori kérdések
Mi a különbség a border-radius és a sarkok sorrendje között?
A CSS rövidített forma mindig a bal felső, jobb felső, jobb alsó, bal alsó sorrendet követi, óramutató járásával megegyezően, a bal felsőtől kezdve. Ennek az eszköznek a négy csúszkája ennek megfelelően van felcímkézve, így soha nem kell magadtól megjegyezned a sorrendet.
Használhatok különböző mértékegységeket minden sarokhoz?
Igen, a valódi CSS-ben keverheted a px, %, em és rem egységeket sarkonként, bár ez a gyakorlatban ritka. Ez az eszköz az egyszerűség kedvéért egységes px értékeket generál — cserélj ki bármely egyedi értéket %-ra vagy más egységre közvetlenül a stíluslapodban, ha kevert egységekre van szükséged.
Miért ad néha ovális alakot a border-radius: 50% kör helyett?
Mert a százalékok minden tengelyen külön-külön relatívak — a vízszintes sugár az elem szélességének, a függőleges sugár pedig a magasságának százaléka. Egy négyzet alakú elemen (egyenlő szélesség és magasság) ez tökéletes kört eredményez; egy téglalapon ellipszist.
A border-radius a háttérképekre és a keretekre is hat?
Igen — a border-radius az elem hátterét, keretét, és (modern böngészőkben) a box-shadow-ját is a lekerekített formára vágja. Nem vágja le a túlcsorduló gyermektartalmat, hacsak nem állítasz be overflow: hidden-t is a szülőelemen.
Van korlátozás a sugár méretére?
Nincs szigorú korlát — ha a sugár meghaladja az elem szélességének vagy magasságának felét, a böngészők úgy korlátozzák, hogy az adott oldal két íve pontosan a közepén találkozzon, ez hogyan válik egy négyzetből tökéletes kör vagy kapszula forma.
Hogyan készítsek kapszula formát vagy tökéletes kört?
Kapszula (pirula) formához állítsd a sugarat legalább az elem magasságának felére — a gyakori trükk a border-radius: 9999px, ami bármilyen magasságnál működik, mert a böngésző automatikusan korlátozza az ívet. A tökéletes körhöz két dolog kell: egyenlő szélesség és magasság, plusz border-radius: 50%.