Generator CSS border-radius
Utwórz skrót CSS border-radius z wartości poszczególnych narożników, z eliptycznymi narożnikami i odpowiednikiem Tailwind.
Generator CSS border-radius
Wprowadź promień dla każdego narożnika, a narzędzie to utworzy dla Ciebie prawidłowe CSS skrót border-radius, skompresowany do najkrótszej prawidłowej formy - jedną wartość, gdy wszystkie cztery narożniki się zgadzają, dwie lub trzy, gdy przeciwne narożniki się powtarzają, i pełną listę czterech wartości, gdy każde narożnik jest inne. Zostało stworzone dla każdego, kto kształtuje karty, przyciski, awatary, okna modalne lub pola wejściowe i chce czystego, kopiowanego CSS bez ręcznego obliczania narożników.
Wybierz Takie samo na każdym narożniku dla prostego zaokrąglonego prostokąta lub przejdź do Oddzielne narożniki, aby ustawić każde narożnik niezależnie w px, procentach lub rem. Włączenie eliptycznych narożników dodaje notacji z ośmioma wartościami ukośną, którą border-radius obsługuje - promień poziomy i odrębny promień wertykalny dla każdego narożnika, sterowany jednym suwkiem proporcji, więc squircle lub spłaszczona pigułka zajmuje jeden przeciąg zamiast ośmiu pól. Opcja Losowy organiczny blob generuje nowy asymetryczny kształt przy każdym uruchomieniu - rodzaj miękkiego, nieregularnego konturu używanego za bohaterskimi obrazami i dekoracyjnymi blobami. Przełączaj się między skrótem border-radius a czterema rozszerzonymi właściwościami border-*-radius, a włącz opcję Tailwind, aby uzyskać pasującą klasę utility o dowolnej wartości obok zwykłego CSS.
Wartości są weryfikowane podczas wpisywania: liczby ujemne są traktowane jako zero i nie ma stanu, który by produkował błędny CSS. Liczniki pod wynikiem pokazuje, ile linii deklaracji zostało wygenerowanych, ile odrębnych wartości narożników skrót kompresuje i dokładną liczbę znaków, aktualizując się za każdą zmianę opcji.
Wszystko działa lokalnie w Twojej przeglądarce - żadna wartość narożnika ani wygenerowany CSS nigdy nie jest wysyłany nigdzie. Skopiuj wynik, pobierz go jako plik .txt lub prześlij go bezpośrednio do wejścia innego narzędzia, aby kontynuować pracę.