Generator border-radius
Ustaw każdy róg i skopiuj CSS.
- Działa w przeglądarce — twój tekst nigdy nie jest nigdzie wysyłany
- Bez rejestracji, bez limitów, za darmo, tak często, jak chcesz
Jak to działa
border-radius jest proste, dopóki nie chcesz zaokrąglić trzech rogów, a jednego zostawić kwadratowego — wtedy każdy musi sprawdzić kolejność czterech wartości.
Kolejność, raz na zawsze
Lewy górny, prawy górny, prawy dolny, lewy dolny — zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego rogu. Ta sama kolejność zgodna z ruchem wskazówek zegara od lewego górnego rogu dotyczy też skrótów margin, padding i border, co warto zapamiętać raz na zawsze.
Piksele czy procenty
Piksele dają tę samą krzywiznę niezależnie od rozmiaru elementu. Procenty odnoszą się do własnej szerokości i wysokości elementu, więc krzywizna się skaluje — a promień 50% na kwadracie daje idealne koło, co jest standardową sztuczką przy okrągłych awatarach.
Kształt pigułki
Promień większy niż połowa wysokości elementu jest ograniczany do dokładnie połowy, dlatego border-radius: 999px niezawodnie tworzy pigułkę niezależnie od wysokości. To bardziej odporne niż obliczanie właściwej wartości, bo działa dalej, gdy zawartość się zmienia.
Gdy rogi wyglądają źle na zagnieżdżonych elementach
Zaokrąglone pudełko wewnątrz innego zaokrąglonego pudełka potrzebuje mniejszego promienia na wewnętrznym, pomniejszonego o odstęp między nimi, bo inaczej krzywizny nie będą współśrodkowe. To drobny szczegół, dzięki któremu karty wyglądają na porządnie zrobione.
Generator border-radius — pytania
W jakiej kolejności są te cztery wartości?
Lewy górny, prawy górny, prawy dolny, lewy dolny — zgodnie z ruchem wskazówek zegara od lewego górnego rogu.
Jak zrobić idealne koło?
border-radius: 50% na elemencie, który jest dokładnie kwadratowy.
Jak zrobić przycisk w kształcie pigułki?
Użyj dużej wartości, takiej jak 999px. Przeglądarki ograniczają ją do połowy wysokości, więc działa przy każdym rozmiarze.
Użyć pikseli czy procentów?
Pikseli dla stałej krzywizny; procentów, gdy ma się skalować razem z elementem.
Czy działa wszędzie?
Tak. border-radius jest obsługiwany bez prefiksu od ponad dekady.