Generator zaokrągleń CSS (border-radius)
Twórz wizualnie border-radius CSS z podglądem na żywo i kopiuj gotowy do użycia kod.
border-radius: —;
100% prywatnie — wszystko działa w Twojej przeglądarce. Nic nie jest przesyłane.
O Generator zaokrągleń CSS (border-radius)
CSS Border Radius Generator tworzy wszystko, od delikatnie zaokrąglonych kart po organiczne kształty plamy. Przeciągaj uchwyty rogów bezpośrednio na podglądzie lub ustaw każdy róg liczbowo — łącznie z pełną ośmiowartościową składnią, w której każdy róg ma osobny promień poziomy i pionowy. To właśnie druga oś odblokowuje jajka, liście, łzy i plamy.
Przełącznik łączenia rogów utrzymuje wszystkie cztery rogi zsynchronizowane dla klasycznego, jednolitego zaokrąglenia, a jego wyłączenie uwalnia każdy róg dla kształtów asymetrycznych. Dwanaście presetów — rounded, pill, circle, squircle, dwie plamy, leaf, egg, arch, teardrop, petal i wave — pokazuje, co potrafi ta właściwość, a przycisk losowania generuje nieskończenie nowe kształty organiczne.
Możesz zmienić jednostkę, przekolorować element i płótno, aby dopasować do swojego projektu, oraz skopiować samą wartość border-radius albo pełną regułę CSS. Narzędzie działa w 100% po stronie klienta — nic nie jest przesyłane.
Jak korzystać z Generator zaokrągleń CSS (border-radius)
- Przeciągnij uchwyty rogów na podglądzie lub wyłącz „Link all corners”, aby edytować każdy róg osobno.
- Ustaw promień poziomy i pionowy dla każdego rogu, aby uzyskać organiczne, przypominające plamę kształty.
- Wybierz jednostkę i dostosuj kolory elementu oraz tła, by podglądać w kontekście.
- Wypróbuj presety — pill, squircle, blob, leaf, teardrop i inne — lub kliknij losowanie.
- Skopiuj wartość border-radius lub pełny CSS.