W tym artykule
Zrozumienie border-radius
Właściwość CSS border-radius zaokrągla narożniki zewnętrznej krawędzi elementu. Przyjmuje od jednej do czterech wartości do niezależnego kontrolowania każdego narożnika — lewego górnego, prawego górnego, prawego dolnego i lewego dolnego. Jedna wartość stosuje ten sam promień do wszystkich czterech narożników, a cztery wartości pozwalają tworzyć asymetryczne kształty.
Border-radius działa z każdym elementem posiadającym widoczne obramowania, tła lub cienie. Przycina zarówno tło, jak i obramowanie do zaokrąglonego kształtu i prawidłowo współdziała z box-shadow, outline i overflow.
Tworzenie kształtów z border-radius
Zmieniając wartości promienia, możesz tworzyć szeroki zakres kształtów geometrycznych całkowicie w CSS. Generator pozwala wizualnie dostosowywać każdy narożnik i natychmiast widzieć rezultat.
- Kształt pigułki — ustaw border-radius na 9999px aby stworzyć w pełni zaokrąglone końce jak przycisk kapsułkowy. To najpopularniejszy wzorzec UI dla tagów, odznak i przycisków pigułkowych
- Koło — zastosuj border-radius: 50% do kwadratowego elementu (równa szerokość i wysokość). Procent jest obliczany względem każdego wymiaru, tworząc idealne koło
- Kształty liścia i plamy — ustaw dwa przeciwległe narożniki na wysokie wartości, a dwa pozostałe na zero (np. border-radius: 60% 0 60% 0) aby tworzyć organiczne kształty
Wypróbuj za darmo — bez rejestracji
Generuj CSS Border Radius →Zaawansowane eliptyczne narożniki
Skrócony zapis border-radius obsługuje składnię z ukośnikiem (/), która pozwala definiować oddzielne promienie poziome i pionowe dla każdego narożnika. Tworzy to krzywe eliptyczne zamiast kołowych.
- Składnia z ukośnikiem — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% oznacza, że promienie poziome to 50%, ale pionowe się różnią, tworząc kształt jajka
- Właściwości poszczególnych narożników — border-top-left-radius: 50px 30px ustawia eliptyczny narożnik z 50px promienia poziomego i 30px pionowego
- Zachowanie procentów — przy procentach promień poziomy jest względny do szerokości, a pionowy do wysokości. Dlatego 50% / 50% na prostokącie tworzy elipsę, nie koło
Często zadawane pytania
Czy używać procentów czy pikseli dla border-radius?
Używaj procentów, gdy chcesz, aby promień skalował się z rozmiarem elementu (koła, elipsy). Używaj pikseli dla stałego zaokrąglenia niezależnie od rozmiaru (przyciski, karty). Popularny wzorzec to 8px dla komponentów UI i 50% dla awatarów.
Czy border-radius powoduje problemy z renderowaniem subpikselowym?
Na wyświetlaczach o wysokiej rozdzielczości małe wartości border-radius (1-2px) mogą wyglądać postrzępione. Użycie nieco większego promienia (minimum 3-4px) może poprawić jakość renderowania.
Jak border-radius współdziała z obramowaniami i outline?
Border-radius zaokrągla zewnętrzną krawędź obramowania. Przy grubym obramowaniu promień wewnętrzny jest automatycznie obliczany jako promień-zewnętrzny minus szerokość-obramowania. Outline nie podąża za border-radius w większości przeglądarek. Box-shadow podąża za zaokrąglonym kształtem.