Generator zaokrągleń i kształtów
Dostosuj poziome i pionowe promienie czterech narożników w px lub %, a następnie wyświetl podgląd kształtu. Skopiuj lub zapisz wygenerowany CSS border-radius. Szerokość, wysokość i kolor podglądu nie są uwzględniane w CSS.
Co możesz zrobić
Dostosuj zaokrąglenie z ustawienia wstępnego
Wybierz jedno z 8 ustawień wstępnych, takich jak zaokrąglone narożniki, kapsuła lub liść, i dostosuj promienie. Wybór ustawienia wstępnego zastępuje promienie i jednostkę.
Ustaw inne zaokrąglenie dla każdego z czterech narożników
Wyłącz ustawienie jednakowych promieni, aby osobno wprowadzić poziomy i pionowy promień lewego górnego, prawego górnego, prawego dolnego i lewego dolnego narożnika.
Sprawdź i pobierz CSS
Po sprawdzeniu kształtu wygeneruj CSS. Przełączaj się między skróconą deklaracją a osobnymi deklaracjami narożników, a następnie skopiuj kod lub zapisz go jako plik CSS.
Jak korzystać
Wybierz ustawienie wstępne i jednostkę
Wprowadź promienie bezpośrednio lub wybierz ustawienie wstępne, aby rozpocząć dostosowywanie. Zmiana jednostki nie konwertuje liczb.
Porównaj zaokrąglenia i kształt
Wprowadź jedną wartość, aby użyć jednakowego promienia. Aby ustawić różne wartości dla narożników, odznacz tę opcję i dostosuj wartości poziome oraz pionowe.
W razie potrzeby sprawdź rozmiar
W ustawieniach podglądu możesz zmienić szerokość, wysokość i kolor podglądu. Nie są one uwzględniane w wynikowym CSS.
Wygeneruj CSS, a następnie skopiuj lub zapisz
Wybierz „Generuj CSS” i określ format. Po zmianie promieni, jednostki lub rozmiaru wygeneruj kod ponownie.
Przydatne, gdy chcesz
Ukształtować narożniki kart i przycisków
Utworzyć CSS dla komponentów strony, zaokrąglając jednakowo wszystkie cztery narożniki lub tylko górne.
Utworzyć asymetryczne zaokrąglone tło
Zmieniać poziome i pionowe zaokrąglenie poszczególnych narożników, aby uzyskać kształty przypominające liście lub formy organiczne.
Jak łączą się promienie, jednostki i rozmiar wyświetlania
Poziomy i pionowy to dwa kierunki tego samego narożnika
Promień poziomy określa zaokrąglenie w poziomie, a pionowy — w pionie. Narożnik nie jest zaokrąglony, jeśli którakolwiek z tych wartości wynosi 0. Określaj cztery narożniki zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego.
% używa szerokości i wysokości jako osobnych wartości odniesienia
Poziome wartości % odnoszą się do szerokości elementu, a pionowe — do jego wysokości. Nawet przy tych samych liczbach kwadrat i wysoki lub szeroki prostokąt wyglądają inaczej. Jednostka px określa długość bezpośrednio.
Zbyt duże promienie są proporcjonalnie zmniejszane
Jeśli suma sąsiednich promieni przekracza długość boku, wszystkie 8 promieni wyświetlania jest zmniejszanych o ten sam współczynnik. Wartości wejściowe i wygenerowany CSS pozostają bez zmian. Po wygenerowaniu możesz sprawdzić promienie użyte w podglądzie w szczegółach.
Zakres kształtów możliwych do uzyskania przez zaokrąglanie narożników
border-radius tworzy narożniki w formie krzywych eliptycznych. Nie umożliwia tworzenia wcięć ani dowolnych wielokątów. Ustawienie wstępne „Squircle” przybliża kształt za pomocą eliptycznych narożników; nie odwzorowuje dokładnie krzywej matematycznej.
Często zadawane pytania
Czy mogę ustawić inne zaokrąglenie dla każdego narożnika?
Tak. Odznacz „Użyj tego samego promienia dla wszystkich narożników”, aby osobno wprowadzić poziomy i pionowy promień każdego narożnika. Ponowne zaznaczenie ustawi wszystkie promienie na poziomy promień lewego górnego narożnika.
Czy liczby są konwertowane po zmianie jednostki?
Nie. Liczby pozostają bez zmian i zmienia się tylko jednostka. Jeśli po przełączeniu z px na % pozostaje wartość większa niż 100, wprowadź ją ponownie w zakresie 0–100.
Czy rozmiar i kolor podglądu są zawarte w CSS?
Nie. Wynik zawiera tylko deklaracje border-radius. Ustaw szerokość, wysokość i kolor tła na stronie lub w komponencie, w którym używasz kodu.
Dlaczego wyświetlany kształt ma mniejsze zaokrąglenia narożników niż wprowadzone promienie?
Przeglądarka proporcjonalnie zmniejsza wyświetlane promienie, aby łuki narożników na siebie nie nachodziły. W sekcji „Promienie użyte w podglądzie” możesz sprawdzić współczynnik zmniejszenia i wartości px dla każdego narożnika.
Dane wejściowe i wyniki
- Promienie
- Podaj wszystkie 8 wartości w tej samej jednostce: 0–100% lub 0–9999px. Dozwolone są również wartości dziesiętne.
- Podgląd
- Szerokość i wysokość podglądu to liczby całkowite z zakresu 1–400px. Jeśli szerokość się nie mieści, możesz przewijać pole poziomo.
- Wynik
- Skrócona deklaracja border-radius lub osobne deklaracje dla każdego z 4 narożników. Skopiuj kod lub zapisz jako border-radius.css.
- Nie obejmuje
- Szerokości, wysokości, koloru tła ani eksportu obrazów lub SVG.