Generator CSS Border Radius
Darmowy generator CSS border-radius online. Ustawiaj promienie rogów dla 4 narożników, podglądaj kształt na żywo i kopiuj gotowy kod CSS jednym kliknięciem. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Generator zaokrągleń CSS (border-radius)
Interaktywny generator CSS border-radius pozwala ustawić zaokrąglenie każdego z czterech narożników elementu HTML niezależnie lub razem (tryb powiązany). Podgląd na żywo pokazuje efekt w czasie rzeczywistym, a gotowy kod CSS skopiujesz jednym kliknięciem.
Do czego służy border-radius?
Właściwość CSS border-radius zaokrągla narożniki elementu HTML. Możesz nadać ten sam promień wszystkim czterem rogom (np. 8px) lub ustawić je osobno w kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny. Wartość 50% zamienia prostokąt w elipsę lub koło. Właściwość działa z przyciskami, kartami, avatarami, obrazami i dowolnymi blokami.
Jak używać generatora?
Wybierz jednostkę (px lub %), następnie wpisz wartości promienia dla każdego narożnika. Włącz opcję Powiązane rogi, aby zmienić wszystkie jednocześnie. Dla zaawansowanych kształtów włącz Eliptyczne i podaj osobne wartości pionowe. Kliknij „Generuj CSS" — zobaczysz podgląd kształtu i gotowy blok CSS do skopiowania.
Składnia border-radius
Skrócony zapis border-radius: TL TR BR BL przyjmuje od 1 do 4 wartości. Pojedyncza wartość (12px) zaokrągla wszystkie rogi równo. Dwie wartości (12px 4px) definiują odpowiednio: lewy górny + prawy dolny oraz prawy górny + lewy dolny. Zapis z ukośnikiem (20px / 10px) tworzy eliptyczne zaokrąglenia z osobnymi promieniami poziomymi i pionowymi.
Jednostki: px, %, em
Piksele (px) dają stały, przewidywalny efekt niezależnie od rozmiaru elementu — idealne dla przycisków i pól formularzy. Procenty (%) obliczane są względem wymiarów elementu — 50% zawsze da koło lub elipsę. Jednostki em/rem skalują się wraz z czcionką, co przydaje się w projektach z elastyczną typografią.
Typowe zastosowania border-radius
- Karty (cards) — lekkie zaokrąglenie (8–12 px) nadaje nowoczesny wygląd kontenerom treści.
- Przyciski —
border-radius: 6pxto klasyczny przycisk;9999pxtworzy kapsułkę (pill button). - Avatary / zdjęcia profilowe —
50%na kwadracie daje idealne koło. - Pola formularzy — małe zaokrąglenie (4–6 px) poprawia czytelność inputów.
- Nieregularne kształty — różne wartości na każdym rogu pozwalają uzyskać organiczne, „blobowe" kształty stosowane w ilustracjach i baner.
Najczęstsze pytania
Czy border-radius działa na wszystkich przeglądarkach?
Tak. Właściwość border-radius jest obsługiwana przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) bez potrzeby stosowania prefiksów vendor. Prefiksy -webkit-border-radius czy -moz-border-radius były potrzebne w przeglądarkach sprzed 2012 roku i nie są już wymagane.
Jaka jest różnica między border-radius a clip-path?
border-radius zaokrągla narożniki i wpływa na tło, obramowanie oraz cień elementu. clip-path wycina element do dowolnego kształtu (wielokąt, elipsa, ścieżka SVG), ale nie zmienia modelu pudełkowego. Do prostych zaokrągleń zawsze lepszy jest border-radius — jest prostszy i wydajniejszy.
Jak ustawić różne promienie dla poszczególnych rogów?
Użyj czterech wartości rozdzielonych spacją: border-radius: 10px 20px 15px 5px. Kolejność zgodna z ruchem wskazówek zegara od lewego górnego: TL TR BR BL. Możesz też użyć osobnych właściwości: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
Co oznacza zapis z ukośnikiem, np. 20px / 10px?
Ukośnik oddziela poziome promienie (oś X) od pionowych (oś Y) dla każdego narożnika. Daje to eliptyczne zaokrąglenie — np. border-radius: 50px 50px 50px 50px / 30px 30px 30px 30px tworzy rogami szeroką elipsę. Generator obsługuje ten tryb po włączeniu opcji „Eliptyczne".