Generator Border Radius
Generate CSS border-radius values visually. Control each corner independently and copy the CSS code.
Najwazniejsze funkcje
- Indywidualna kontrola promienia każdego rogu
- Łączenie/rozłączanie rogów dla jednolitych wartości
- Gotowe kształty (pigułka, koło, liść, bilet)
- Jednoklikowe kopiowanie kodu CSS
Guide
Właściwość CSS border-radius kontroluje zaokrąglanie narożników elementu. W najprostszej formie border-radius: 8px zaokrągla wszystkie cztery narożniki o 8 pikseli. W naj bardziej złożonej border-radius akceptuje osiem wartości (cztery promienie poziome i cztery promienie pionowe oddzielone ukośnikiem), by tworzyć asymetryczne, eliptyczne narożniki, które produkują organiczne, niekołowe kształty. Ten przewodnik obejmuje każdy aspekt border-radius: składnię, efekty wizualne, powszechne wzorce, rozważenia wydajności i zastosowania projektowe. Podstawowa składnia przyjmuje od jednej do czterech wartości reprezentujących promień okręgu każdego narożnika. Jedna wartość ma zastosowanie do wszystkich czterech narożników: border-radius: 10px. Dwie wartości ustawiają górny-lewy/dolny-prawy i górny-prawy/dolny-lewy: border-radius: 10px 20px. Trzy wartości ustawiają górny-lewy, górny-prawy/dolny-lewy i dolny-prawy: border-radius: 10px 20px 30px. Cztery wartości ustawiają każdy narożnik indywidualnie w kolejności zgodnej z ruchem wskazówek zegara, zaczynając od górnego-lewego: border-radius: 10px 20px 30px 40px. Możesz też celować w indywidualne narożniki z właściwościami longhand: border-top-left-radius, border-top-right-radius, border-bottom-right-radius i border-bottom-left-radius. Wartości procentowe tworzą efekty, które skalują się z elementem. border-radius: 50% na kwadratowym elemencie produkuje idealny okrąg. Na prostokątnym elemencie 50% produkuje elipsę. To dlatego, że wartości procentowe są relatywne do wymiarów elementu: promienie poziome są procentami szerokości, promienie pionowe procentami wysokości. Element 200px na 100px z border-radius: 50% ma narożniki ze 100px promieniem poziomym i 50px promieniem pionowym, tworząc elipsę zamiast okręgu. Ta relacja wymiarowa jest ważna do zrozumienia, gdy pracujesz z responsywnymi układami, gdzie proporcje elementu zmieniają się przy różnych rozmiarach rzutni. Składnia z ukośnikiem umożliwia eliptyczne narożniki, gdzie promienie poziome i pionowe się różnią. border-radius: 50px / 25px tworzy narożniki, które krzywą się bardziej w poziomie niż w pionie, produkując rozciągnięty, owalny efekt. Pełna składnia ośmiu wartości to: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, gdzie h to promień poziomy, a v promień pionowy. Ten poziom kontroli pozwala Ci tworzyć organiczne, blobopodobne kształty, które byłyby trudne do osiągnięcia w inny sposób. Wartość jak border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produkuje asymetryczny, naturalnie wyglądający kształt często używany w nowoczesnym projektowaniu webowym do dekoracyjnych blobów, teł awatarów i dzielników sekcji. Zrozumienie geometrii stojącej za border-radius pomaga przewidywać wyniki wizualne. Każdy narożnik elementu otrzymuje elipsę (lub okrąg, jeśli oba promienie są równe) dopasowaną do niego. Obramowanie, tło i treść są wszystkie przycinane do tego zaokrąglonego prostokąta. Elipsa dla każdego narożnika jest definiowana przez jej promień poziomy (ciągnący się wzdłuż górnej lub dolnej krawędzi) i promień pionowy (ciągnący się wzdłuż lewej lub prawej krawędzi). Gdy oba promienie są równe, narożnik jest łukiem kołowym. Gdy się różnią, narożnik jest łukiem eliptycznym. Wizualizacja tej elipsy pomaga Ci zrozumieć, dlaczego pewne kombinacje wartości produkują nieoczekiwane kształty. Stworzenie idealnego okręgu wymaga dwóch warunków: element musi być kwadratowy (równe szerokość i wysokość), a border-radius musi wynosić 50% lub wartość równą połowie rozmiaru elementu. Jeśli element nie jest kwadratowy, border-radius: 50% tworzy elipsę. Dla zdjęć profilowych i awatarów upewnij się, że kontener jest kwadratowy używając równych wartości szerokości i wysokości, lub użyj aspect-ratio: 1 w CSS, a następnie zastosuj border-radius: 50%. Overflow: hidden na kontenerze przycina obraz do kształtu kołowego. Alternatywą jest użycie clip-path: circle(50%), które produkuje ten sam wynik wizualny. Kształty pigułki (kształty stadionowe) to prostokąty z w pełni zaokrąglonymi krótkimi bokami. Zastosuj border-radius z wartością równą lub większą niż połowa wysokości elementu. Dla przycisku o wysokości 40px border-radius: 20px zaokrągla końce do półokręgów. Użycie bardzo dużej wartości jak border-radius: 9999px gwarantuje kształt pigułki niezależnie od wysokości elementu, bo przeglądarka ogranicza promień do połowy najmniejszego wymiaru. Ta technika jest powszechna dla tagów, odznak, przycisków i pól wejściowych w nowoczesnym projektowaniu UI. Kształt pigułki stał się domyślnym stylem przycisku w wielu systemach projektowych włączając Apple's Human Interface Guidelines. Border-radius wchodzi w interakcję z kilkoma innymi właściwościami CSS w sposób, który wpływa na renderowany wynik. Samo obramowanie jest dotknięte: linia obramowania podąża za zaokrąglonym narożnikiem, utrzymując swoją szerokość przez całą krzywą. Outline nie podąża za border-radius w większości przeglądarek, renderując się jako prostokąt nawet, gdy element ma zaokrąglone narożniki (choć Firefox i nowsze wersje Chromium teraz obsługują zaokrąglone outline'y). Box-shadow podąża za border-radius, rzucając zaokrąglone cienie, które pasują do kształtu elementu. Overflow: hidden przycina treść dziecka do zaokrąglonego kształtu, co jest istotne dla obrazów wewnątrz zaokrąglonych kontenerów. Background-clip determinuje, czy tło rozciąga się pod obramowanie w obszar zaokrąglony. Algorytm renderowania border-radius rozwiązuje konflikty, gdy suma sąsiadujących promieni przekracza dostępną przestrzeń. Jeśli ustawisz border-top-left-radius: 100px i border-top-right-radius: 100px na elemencie, który ma tylko 150px szerokości, oba promienie sumują się do 200px, ale dostępne jest tylko 150px. Przeglądarka proporcjonalnie redukuje oba promienie, by dopasować. Konkretnie oblicza czynnik skalowania (150/200 równa się 0,75) i aplikuje go do obu promieni, co daje po 75px. Ta automatyczna korekta oznacza, że możesz używać dużych wartości promienia bez martwienia się o overflow, choć wynik wizualny może różnić się od Twojej intencji. Algorytm rozważa wszystkie cztery narożniki jednocześnie, znajdując najmniejszy potrzebny czynnik skalowania. Zagnieżdżony border-radius wymaga, by wewnętrzne elementy miały mniejsze promienie niż ich rodzice, by utrzymać spójne wizualne odstępy. Jeśli karta ma border-radius: 16px i padding: 8px, obszar treści wewnętrznej powinien mieć border-radius: 8px (promień rodzica minus padding). Wzór to: promień wewnętrzny równa się promień zewnętrzny minus odstęp między elementami. Jeśli odstęp jest większy niż promień zewnętrzny, promień wewnętrzny powinien wynosić 0 (bez zaokrąglenia). Ta zasada ma zastosowanie do kart zawierających obrazy, zagnieżdżone kontenery i każdą relację rodzic-dziecko, gdzie oba mają zaokrąglone narożniki. Ignorowanie tej zasady tworzy niespójne szerokości odstępów przy narożnikach, które wyglądają wizualnie źle, nawet jeśli nie potrafisz od razu zidentyfikować dlaczego. Kształty CSS i border-radius służą różnym celom, które czasem są mylone. Border-radius zaokrągla wizualne narożniki i obszar trafienia elementu. CSS clip-path tworzy arbitralne kształty przez przycinanie (circle(), ellipse(), polygon(), path()). Dla prostych zaokrąglonych prostokątów border-radius jest bardziej wydajny i łatwiejszy w utrzymaniu. Dla złożonych kształtów (trójkąty, heksagony, niestandardowe wielokąty) clip-path jest niezbędny. Border-radius jest komponowany na GPU i jest jednym z najtańszych efektów wizualnych w CSS. Clip-path ze złożonymi wielokątami może być droższy. Właściwość shape-outside używa border-radius do obługiwania tekstu wokół zaokrąglonych elementów, tworząc układy w stylu magazynowym. Wydajność border-radius jest ogólnie doskonała. Zaokrąglone narożniki są renderowane przez kompositor GPU we wszystkich nowoczesnych przeglądarkach i nie wyzwalają przeliczania układu ani przeklejowania podczas animacji. Animowanie samego border-radius jest też wydajne, bo przeglądarka może interpolować wartości i komponować wynik na GPU. To czyni border-radius odpowiednim do efektów hover (przejście od kwadratowych do zaokrąglonych narożników) i animowanych elementów. Jedynym rozważeniem wydajności jest, gdy border-radius jest łączony z box-shadow na wielu elementach, bo każdy zaokrąglony cień wymaga dodatkowej pracy komponowania. Obsługa border-radius w przeglądarkach jest uniwersalna we wszystkich nowoczesnych przeglądarkach bez prefiksów. Prefiksy -webkit-border-radius i -moz-border-radius nie są konieczne od około 2012 roku. Jedynymi przypadkami brzegowymi są składnia z ukośnikiem dla narożników eliptycznych, która jest obsługiwana wszędzie od IE9. Jeśli obsługujesz niezwykle stare przeglądarki (IE8), border-radius degraduje się z gracją: element po prostu renderuje się z kwadratowymi narożnikami. Żadna funkcjonalność nie jest tracona, tylko wizualne zaokrąglenie. Trendy projektowe obejmujące border-radius cyklują między skrajnościami. Wczesna dekara 2010. faworyzowała subtelne zaokrąglenie 3px do 5px. Środek dekady 2010. wrócił do ostrych narożników 0px w projekcie flat. Późna dekara 2010. przywróciła miękkie zaokrąglenie z promieniami 8px do 16px w material design i interfejsach pod wpływem iOS. Wczesna dekara 2020. wprowadziła superzaokrąglone projekty z promieniami 20px+ i asymetrycznymi kształtami blobów. Obecne trendy faworyzują średnie zaokrąglenie (8px do 16px) dla komponentów UI i większe zaokrąglenie (24px+) dla kart i kontenerów, tworząc miękki, przystępny klimat. Kształt squircle (superelipsa), którego Apple używa dla ikon aplikacji, zyskał popularność, ale wymaga clip-path lub SVG, bo border-radius tworzy standardowy łuk kołowy, a nie superelipsę. Spójne wartości border-radius w systemie projektowym tworzą wizualną spójność. Zdefiniuj skalę tokenów promienia: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Aplikuj te tokeny konsekwentnie: przyciski używają --radius-md, karty używają --radius-lg, awatary używają --radius-full, małe odznaki używają --radius-sm. To systematyczne podejście zapobiega wizualnej niespójności losowych wartości promienia (6px tu, 10px tam, 14px gdzie indziej), która sprawia, że projekty wydają się nieprzetworzone. Wiele frameworków CSS (Tailwind, Chakra UI) zawiera predefiniowane skale promienia z tego powodu. Responsywny border-radius może być osiągnięty używając clamp(), min() lub zapytań medialnych. Karta z border-radius: clamp(8px, 2vw, 24px) ma mniejsze zaokrąglenie na małych ekranach i większe zaokrąglenie na szerokich ekranach. To zapobiega dominowaniu dużych promieni nad małymi elementami na mobile. Alternatywnie redukuj border-radius przy punktach przerwania mobile: border-radius: 24px na desktopie, 12px na tablecie, 8px na mobile. Dla pełnoszerokościowych kart mobilnych, które dotykają krawędzi ekranu, usuwanie border-radius całkowicie na małych ekranach (border-radius: 0 przy punkcie przerwania mobile) to powszechny wzorzec, który maksymalizuje obszar treści. Border-radius z obrazami wymaga overflow: hidden na kontenerze, by przyciąć obraz do zaokrąglonego kształtu. Bez overflow: hidden obraz rozciąga się poza zaokrąglone narożniki, a zaokrąglenie pojawia się tylko na tle kontenera. Alternatywne podejście używa samego obrazu jako background-image na zaokrąglonym elemencie. Dla elementów <img> właściwość object-fit kontroluje, jak obraz wypełnia zaokrąglony kontener: object-fit: cover wypełnia cały obszar (przycinając w razie potrzeby), podczas gdy object-fit: contain mieści cały obraz wewnątrz (potencjalnie zostawiając luki). Oba podejścia działają, ale overflow: hidden na kontenerze z podrzędnym <img> jest bardziej powszechne, bo zachowuje element img dla dostępności (tekst alt) i SEO. Zaawansowane tworzenie kształtów łączy border-radius z innymi właściwościami CSS, by tworzyć złożone formy bez obrazów lub SVG. Kształt jajka używa asymetrycznych promieni pionowych: border-radius: 50% / 60% 60% 40% 40%. Kształt liścia używa zaokrąglania przeciwnych narożników: border-radius: 0 50% 0 50%. Kształt kropli łączy border-radius na trzech narożnikach z ostrym czwartym narożnikiem. Dymek używa border-radius na głównym kształcie z pseudo-elementem (::before lub ::after) dla ogona. Te kształty tylko CSS unikają potrzeby SVG lub obrazów dla prostych elementów dekoracyjnych, redukując żądania HTTP i umożliwiając łatwe theming kolorów przez niestandardowe właściwości CSS. Border-radius i treść tekstowa wchodzą w interakcję w specyficzny sposób. Tekst wewnątrz zaokrąglonego elementu nie podąża za krzywą. Tekst jest ułożony w prostokątnym polu treści, a zaokrąglone narożniki przycinają tylko tło i obramowanie. Dla małych wartości promienia to nie jest zauważalne. Dla dużych wartości promienia tekst blisko narożników może wydawać się mieć dodatkowy padding, bo zaokrąglone tło cofa się od krawędzi treści. To jeden z powodów, dla którego elementy z dużymi wartościami border-radius często potrzebują więcej paddingu niż ich kwadratowe odpowiedniki. Jeśli ustawisz border-radius: 24px na przycisku, padding powinien wynosić co najmniej 12px do 16px po bokach, by tekst nie tłoczył się wizualnie przy zakrzywionej krawędzi. Animacja border-radius między stanami tworzy płynne przejścia kształtu. Przejście od border-radius: 0 do border-radius: 50% na kwadratowym elemencie morfuł go z kwadratu do okręgu. Ten efekt jest popularny dla wskaźników ładowania, efektów hover i animacji ujawniania. CSS transition: border-radius 0,4s ease obsługuje interpolację. Dla bardziej złożonego morfowania (przejścia między różnymi asymetrycznymi kształtami używającymi składni z ukośnikiem) przejścia CSS interpolują każdą z ośmiu wartości niezależnie, produkując płynne kształty pośrednie. Arkusze stylów druku i border-radius zasługują na rozważenie dla aplikacje webowe, które użytkownicy mogą drukować. Większość nowoczesnych przeglądarek renderuje border-radius w druku, ale niektóre starsze wersje nie. Jeśli Twój projekt zależy od zaokrąglonych narożników dla znaczenia (nie tylko dekoracji), przetestuj wydruk. Dla faktur, paragonów i innych drukowalnych dokumentów zaokrąglone narożniki są dekoracyjne, a ich brak w druku nie wpływa na użyteczność. Border-radius w frameworkach CSS i bibliotekach komponentów ustandaryzował się do podejścia opartego na tokenach. Tailwind CSS używa klas jak rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl i rounded-full. Bootstrap używa rounded, rounded-circle, rounded-pill i rounded-0 do rounded-5. Chakra UI używa borderRadius z nazwanymi rozmiarami (sm, md, lg, xl, full). Zrozumienie, jak te frameworki implementują border-radius, pomaga Ci migrować między systemami i dostosowywać domyślne do swoich wymagań projektowych. Squircle (superelipsy) to kształt, który wygląda jak zaokrąglony prostokąt, ale z inną matematyczną krzywą. Apple używa squircle dla ikon aplikacji iOS. Squircle ma bardziej stopniową krzywiznę przy przejściu od prostej krawędzi do krzywej, produkując bardziej miękki wygląd niż standardowy łuk kołowy border-radius. CSS border-radius nie może wyprodukować prawdziwego squircle, bo używa łuków kołowych lub eliptycznych. Aby stworzyć squircle w CSS, potrzebujesz clip-path z funkcją path() lub maską SVG. Wizualna różnica między zaokrąglonym prostokątem border-radius a squircle jest subtelna przy małych rozmiarach, ale zauważalna przy większych rozmiarach, zwłaszcza przy promieniach narożników powyżej 20px. Zapytania kontenerowe i border-radius mogą współpracować dla prawdziwie responsywnego projektowania komponentów. Z zapytaniami kontenerowymi CSS (@container) możesz zmieniać border-radius w oparciu o rozmiar kontenera zamiast rozmiar rzutni. Komponent karty z border-radius: 24px w szerokim kontenerze może przełączyć się na border-radius: 12px, gdy umieszczony w wąskim pasku bocznym, niezależnie od ogólnej szerokości strony. Ta responsywność na poziomie komponentów produkuje bardziej spójne wyniki wizualne niż same zapytania medialne oparte na rzutni. Border-radius w elementach tabeli wymaga specjalnej obsługi. Domyślnie border-radius na elemencie <table> nie zaokrągla narożników indywidualnych komórek. Aby stworzyć tabelę z zaokrąglonymi zewnętrznymi narożnikami, ustaw border-collapse: separate (nie collapse) na tabeli, zastosuj border-radius do elementu tabeli i ukryj overflow z overflow: hidden. Dla indywidualnych zaokrąglonych komórek zastosuj border-radius do specyficznych elementów <td> lub <th>. Border-top-left-radius idzie na pierwszą komórkę pierwszego rzędu, border-top-right-radius na ostatnią komórkę pierwszego rzędu i tak dalej. To podejście per komórka jest rozwlekłe, ale daje precyzyjną kontrolę. Funkcje czasu przejścia wpływają na to, jak animacje border-radius się czują. Przejście liniowe produkuje mechaniczne, robotyczne zaokrąglanie. Przejście ease zaczyna szybko, zwalnia w środku i przyspiesza na końcu, produkując naturalne uczucie. Przejście ease-in-out tworzy płynne przyspieszenie i zwalnianie. Dla zabawnych interfejsów funkcje cubic-bezier mogą tworzyć odbijające lub sprężyste zmiany promienia: transition: border-radius 0,5s cubic-bezier(0,34, 1,56, 0,64, 1) przewyższa wartość docelową przed osiadaniem. Dopasuj funkcję czasu do ogólnego stylu animacji swojego interfejsu. CSS Houdini i Paint API otwierają przyszłe możliwości dla border-radius poza to, co oferuje obecna specyfikacja. Z Houdini możesz tworzyć niestandardowe worklety paint, które rysują dowolny kształt narożnika, jaki chcesz: squircle, faliste krawędzie, pofalowane obramowania i inne formy, których standardowy border-radius nie może wyprodukować. Podczas gdy obsługa Houdini jest nadal ograniczona (głównie przeglądarki Chromium), reprezentuje przyszłość niestandardowych kształtów CSS. W międzyczasie clip-paths SVG i maski zapewniają międzyprzeglądarkowe alternatywy dla niestandardowych kształtów narożników. Testowanie border-radius między rozdzielczościami ekranu i gęstościami pikseli ma znaczenie, bo renderowanie zakrzywionych krawędzi różni się między standardowymi (1x), Retina (2x) i wyższej gęstości wyświetlaczami. Na wyświetlaczu 1x obramowanie 1px na zaokrąglonym narożniku może wydawać się poszarpane. Na wyświetlaczu 2x ten sam narożnik renderuje się płynnie, bo jest więcej fizycznych pikseli dostępnych do reprezentacji krzywej. Jeśli Twoja docelowa publiczność obejmuje użytkowników na wyświetlaczach niskiej gęstości, przetestuj, że Twoje zaokrąglone narożniki wyglądają akceptowalnie przy rozdzielczości 1x. Większe wartości promienia renderują się bardziej płynnie przy wszystkich gęstościach, bo krzywa jest bardziej stopniowa. Generator border-radius pozwala Ci wizualnie dostosować promień poziomy i pionowy każdego narożnika niezależnie, podejrzeć wynik w czasie rzeczywistym i skopiować CSS. To jest szybsze niż zgadywanie wartości w kodzie, szczególnie dla składni z ukośnikiem, gdzie relacja między ośmioma wartościami a wynikiem wizualnym nie jest intuicyjna. Używaj generatora, by eksplorować asymetryczne kształty, znaleźć dokładne wartości, które pasują do Twojej intencji projektowej, a następnie zastosować te wartości w swoim arkuszu stylów.
Czeste pytania
Czy mogę ustawić różne wartości dla każdego rogu?
Tak, możesz niezależnie sterować wszystkimi czterema rogami: lewym górnym, prawym górnym, prawym dolnym i lewym dolnym.
Jakich jednostek się używa?
Narzędzie domyślnie stosuje piksele (px), które możesz zmienić w wyniku CSS według potrzeby.
