Przejdź do głównej treści
LibraTool logoLibraTool

Generator zaokrąglenia CSS za darmo

Wizualnie projektuj zaokrąglone rogi z niezależną kontrolą nad każdym rogiem. Obsługuje składnię eliptyczną X/Y dla organicznych kształtów.

Działa offline po wczytaniu
border-radius: 20px 20px 20px 20px;
Jednostka

Typowe zastosowania

  • Organiczne Kształty BlobUżyj składni eliptycznej X/Y, aby tworzyć unikalne kształty blob dla sekcji hero i ilustracji.
  • Rogi Kart i KontenerówStandardowe zaokrąglone rogi dla kart, kontenerów i paneli w nowoczesnym projektowaniu interfejsu.
  • Kształty Awatara i Zdjęcia ProfilowegoUtwórz właściwy styl kąta dla zdjęć profilowych: kołowy, squircle lub zaokrąglony kwadrat.
  • Pigułki, Tagi i OdznakiTwórz idealnie zaokrąglone przyciski pigułek, tagi i odznaki z preset 9999.
  • Asymetryczne Projekty NarożnikówMieszaj promienie między narożniki, aby tworzyć charakterystyczne, rozpoznawalne kształty kart i przycisków marki.

Jak to działa

Generator border-radius działa w całości w przeglądarce — bez serwera, biblioteki i przesyłania. Buduje wartość CSS border-radius bezpośrednio w JavaScript za pomocą stanu React i useMemo, a następnie stosuje ją jako styl inline na żywym elemencie div, więc to silnik CSS przeglądarki renderuje kształt w czasie rzeczywistym.

  1. 1
    Suwaki zapisują stan
    Każdy suwak zapisuje jedną z ośmiu liczbowych zmiennych stanu — cztery poziome promienie narożników i cztery pionowe dla trybu eliptycznego. Tryb ujednolicony łączy wszystkie osiem w jeden suwak dzięki funkcji pomocniczej setAll, która synchronizuje wszystkie wartości naraz.
  2. 2
    useMemo składa wartość CSS
    Hook useMemo przelicza ciąg border-radius przy każdej zmianie wartości narożnika, jednostki (px lub %) lub przełącznika trybu eliptycznego. W trybie standardowym tworzy skrót z czterema wartościami; w trybie eliptycznym dodaje separator ukośnika dla pełnej składni ośmiu wartości — np. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Silnik CSS przeglądarki renderuje podgląd
    Obliczony ciąg jest ustawiany jako styl inline borderRadius na zwykłym elemencie div. Całe renderowanie wykonuje silnik układu przeglądarki — bez canvas, SVG ani zewnętrznego kodu rysującego.
  4. 4
    Clipboard API kopiuje wynik
    Kliknięcie Kopiuj wywołuje navigator.clipboard.writeText z deklaracją CSS (border-radius: ...;) lub równoważną klasą Tailwind z dowolną wartością (rounded-[...]), zależnie od wybranego formatu.

Powiązane narzędzia

🎨

Generator cienia CSS

Wizualny kreator CSS box-shadow z podglądem na żywo, wielowarstwowym układaniem, selektorem kolorów, przełącznikiem wewnętrznym i kopiowaniem jednym kliknięciem. Zawiera ustawienia wstępne Material, neumorfizm i poświata.

Wypróbuj
🟦

Generator siatki CSS

Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.

Wypróbuj
↔️

Generator flexbox CSS

Eksperymentuj z kierunkiem flex, zawijaniem, justify i align na elementach na żywo — i skopiuj CSS.

Wypróbuj

Często zadawane pytania