Generator Border Radius CSS — Wizualne Zaokrąglone Rogi
Generuj border-radius CSS wizualnie. Kontroluj każdy róg niezależnie, przełączaj px lub %, zobacz podgląd na żywo i skopiuj kod. 100% w przeglądarce.
Generator Border Radius CSS — Projektuj Zaokrąglone Rogi Wizualnie
Twórz idealny border-radius za pomocą wizualnego edytora. Dostosuj każdy róg niezależnie lub połącz je wszystkie razem, przełączaj między pikselami a procentami, obserwuj podgląd na żywo i kopiuj gotowy do użycia CSS. Koniec z metodą prób i błędów.
Funkcje
- Niezależne rogi: ustaw lewy-górny, prawy-górny, prawy-dolny i lewy-dolny osobno
- Tryb połączony: zmień wszystkie cztery rogi naraz jednym suwakiem
- px lub %: przełączaj jednostki — procenty tworzą gładkie eliptyczne krzywe
- Podgląd na żywo: zobacz kształt aktualizujący się natychmiast na przykładowym elemencie
- Czysty output CSS: skopiuj pojedynczą właściwość gotową do wklejenia
Zrozumienie border-radius
Skrót border-radius przyjmuje do czterech wartości, stosowanych zgodnie z ruchem wskazówek zegara, zaczynając od lewego-górnego rogu: lewy-górny prawy-górny prawy-dolny lewy-dolny. Wartość 0 oznacza ostry róg; wyższe wartości dają bardziej zaokrąglone rogi.
px vs % — jaka różnica?
- Piksele (px): stały promień niezależnie od rozmiaru elementu — przewidywalny i spójny
- Procent (%): względem wymiarów elementu. Ustawienie wszystkich rogów na 50% na kwadracie zamienia go w idealne koło
Częste kształty
- Zaokrąglona karta: 8–16px na wszystkich rogach
- Pigułka / przycisk: duża wartość px jak 999px
- Koło: 50% na wszystkich rogach (na kwadratowym elemencie)
- Dymek: zaokrąglij trzy rogi, zostaw jeden ostry
Prywatność
To narzędzie działa całkowicie w Twojej przeglądarce. Nic nie jest przesyłane ani przechowywane.