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.