Generator Border Radius - Zaokrąglone Rogi CSS i Tailwind

Generator border-radius: zaokrąglone rogi CSS z podglądem

Zaokrąglenie rogów w CSS to jedna właściwość, border-radius, ale potrafi przyjąć aż osiem liczb. Generator buduje z nich najkrótszą poprawną regułę, rysuje podgląd na elemencie o podanych wymiarach, wypisuje wersję dla każdego rogu osobno i klasy Tailwind CSS. Działa też w drugą stronę: wklejasz gotową wartość z cudzego arkusza i widzisz, jak naprawdę wygląda. Przykład: 12 px na wszystkich rogach daje border-radius: 12px; i klasę rounded-xl.

wartości w pełnym zapisie: 4 promienie poziome i 4 pionowe po ukośniku

50 %

tyle wystarczy, żeby kwadrat stał się kołem, a prostokąt elipsą

0,8

współczynnik zmniejszenia z przykładu w specyfikacji W3C, gdy rogi się nie mieszczą

12 px

promień wewnątrz obramowania 4 px przy zewnętrznym 16 px

Jak wygenerować border-radius - krok po kroku

Lewy górny róg - wystarczy samo to pole, wtedy wszystkie rogi dostają ten sam promień. Typowe wartości na przyciskach i kartach to 4-16 px.
Prawy górny, prawy dolny, lewy dolny - wypełniaj po kolei, zgodnie z ruchem wskazówek zegara. Puste dalsze pola uzupełniają się tak, jak robi to przeglądarka.
Jednostka - px, %, rem albo em. Procenty liczą się od szerokości (poziomo) i wysokości (pionowo) elementu.
Promień pionowy - opcjonalny. Inna liczba niż w polach rogów daje rogi eliptyczne, zapisywane po ukośniku.
Szerokość, wysokość i obramowanie - wymiary elementu w px do podglądu i do sprawdzenia, czy rogi się mieszczą; obramowanie pozwala policzyć promień elementu w środku.
Wklej wartość border-radius - zamiast pól rogów, np. 30% 70% 70% 30% / 30% 30% 70% 70%. Ma pierwszeństwo przed polami.
Odczytaj wynik - reguła do skopiowania, podgląd, tabela rogów po ewentualnym zmniejszeniu, cztery właściwości osobno i klasy Tailwind.

Skrót, ukośnik i rogi, które się nie mieszczą

Kolejność w skrócie zawsze idzie od lewego górnego rogu zgodnie z ruchem wskazówek zegara. Gdy wartości jest mniej niż cztery, brakujące uzupełnia się według prostej reguły ze specyfikacji: brak lewego dolnego oznacza to samo co prawy górny, brak prawego dolnego to samo co lewy górny, a brak prawego górnego to samo co lewy górny. Dlatego 5px 10px 15px to w praktyce 5, 10, 15 i 10 px. Generator stosuje tę regułę także przy skracaniu: 12px 12px 12px 12px zapisze po prostu jako 12px.

Tak przeglądarka rozkłada skrót na cztery rogi. Wyniki z generatora dla wartości wklejonych w polu „Albo wklej wartość border-radius”.

Zapis	Lewy górny	Prawy górny	Prawy dolny	Lewy dolny
`5px`	5px	5px	5px	5px
`5px 10px`	5px	10px	5px	10px
`5px 10px 15px`	5px	10px	15px	10px
`5px 10px 15px 20px`	5px	10px	15px	20px
`10px / 20px`	10px 20px	10px 20px	10px 20px	10px 20px
`10px 20px / 5px`	10px 5px	20px 5px	10px 5px	20px 5px

Przy rogach z dwiema liczbami pierwsza to promień poziomy, druga pionowy, tak jak w osobnych właściwościach border-top-left-radius i pozostałych.

Ukośnik dzieli promienie na poziome i pionowe. Róg 40px / 20px jest ćwiartką elipsy o szerokości 40 i wysokości 20 px. Jeśli którakolwiek z dwóch liczb rogu wynosi zero, róg zostaje prosty. Na takich parach opierają się popularne „bloby”, kształty jak plama farby.

Co, gdy promienie są większe niż element? Specyfikacja W3C każe policzyć dla każdej krawędzi stosunek jej długości do sumy dwóch promieni na tej krawędzi i wziąć najmniejszy. Jeśli wyjdzie mniej niż 1, wszystkie promienie mnoży się przez tę liczbę. Przykład z samej specyfikacji: element 6em × 2em z 0.5em 2em 0.5em 2em ma na lewej krawędzi 2,5em promieni przy wysokości 2em, więc współczynnik to 0,8, a rogi mają w rzeczywistości 0,4em i 1,6em. Generator przy 16 px na 1em pokaże 6,4 i 25,6 px. Ten sam mechanizm sprawia, że 9999px na przycisku 160 × 44 px daje równe półkola po 22 px, czyli kapsułę.

Klasy rounded w Tailwind CSS i ich wartości

Domyślna skala z pliku theme.css Tailwind CSS v4. Generator dobiera nazwaną klasę, gdy wpisana wartość trafia dokładnie w skalę w px albo rem; w pozostałych przypadkach podaje wartość dowolną w nawiasach kwadratowych, np. rounded-[10px].

Klasa	rem	px (przy 16 px)	Przykładowe użycie
`rounded-xs`	0,125	2	etykiety, drobne znaczniki
`rounded-sm`	0,25	4	pola formularza
`rounded-md`	0,375	6	przyciski
`rounded-lg`	0,5	8	karty, okna dialogowe
`rounded-xl`	0,75	12	większe karty
`rounded-2xl`	1	16	sekcje, kafelki
`rounded-3xl`	1,5	24	duże bloki, banery
`rounded-4xl`	2	32	bardzo miękkie kształty
`rounded-none`	0	0	rogi proste

Klasa rounded-full ustawia w Tailwind v4 nieskończenie duży promień, czyli działa jak 9999px: zawsze kapsuła albo koło. Rogi pojedynczo ustawiają klasy rounded-tl-, rounded-tr-, rounded-br- i rounded-bl-.

Rzeczy o zaokrągleniach, które łatwo przeoczyć

Procent to nie zawsze koło. 50% na elemencie 200 × 100 px daje rogi 100 × 50 px, czyli elipsę, bo promień poziomy liczy się od szerokości, a pionowy od wysokości.

Zagnieżdżone rogi muszą być mniejsze. Element w środku ramki z obramowaniem 8 px i promieniem 24 px powinien mieć 16 px. Przy tym samym promieniu krzywe nie są równoległe i ramka w rogu wygląda na grubszą niż na krawędziach.

Zmniejszenie dotyczy wszystkich rogów naraz. Gdy nie mieści się jeden duży róg, przeglądarka zmniejsza też te małe. Specyfikacja przyznaje, że przez to sąsiednie elementy z tym samym małym promieniem mogą wyglądać inaczej.

Ujemny promień jest błędem. Przeglądarka pomija wtedy całą deklarację, więc obowiązuje to, co ustawiły inne reguły, a nie „zero”. Generator zgłasza to od razu.

Zero nie potrzebuje jednostki. 12px 12px 0 0 to poprawny zapis zaokrąglenia tylko górnych rogów. Każda inna liczba bez jednostki jest błędem.

Kto korzysta z generatora zaokrągleń

Front-end developer przepisuje projekt z Figmy, gdzie każdy róg ma inną wartość, i chce dostać najkrótszy zapis bez liczenia, które pola można pominąć. Osoba pracująca w Tailwind sprawdza, czy 12 px to już rounded-xl, czy trzeba wartości w nawiasach. Projektant buduje blob z ośmiu procentów i ogląda go na kwadracie, zanim wklei do kodu. Ktoś, kto poprawia cudzy arkusz, wkleja zastaną wartość i dowiaduje się, dlaczego rogi wyglądają inaczej niż wpisane, bo przeglądarka je zmniejszyła.

Pytania o border-radius w CSS

Jak zaokrąglić tylko górne rogi?

Wpisz promień w polach lewego i prawego górnego rogu, a w dolnych 0. Wynik to border-radius: 12px 12px 0 0;, w Tailwind rounded-tl-xl rounded-tr-xl rounded-br-none rounded-bl-none.

Jak zrobić okrągły obrazek albo awatar?

Na kwadratowym elemencie wystarczy border-radius: 50%. Przy 96 × 96 px każdy róg ma 48 × 48 px, czyli razem pełne koło. Na prostokącie ta sama wartość da elipsę.

Dlaczego border-radius nie działa?

Najczęściej rogi są zaokrąglone, ale zawartość wystaje poza nie, np. obrazek albo tło dziecka. Pomaga overflow: hidden na elemencie z zaokrągleniem. Druga przyczyna to błąd w wartości, np. liczba bez jednostki albo ujemna: wtedy przeglądarka pomija całą deklarację. Generator wskaże taki błąd po wklejeniu wartości.

Px, rem czy procenty?

Px daje stały promień niezależny od rozmiaru elementu. Rem rośnie razem z rozmiarem czcionki ustawionym przez użytkownika (przy domyślnych 16 px 1rem = 16 px). Procenty zmieniają kształt razem z wymiarami elementu, co przydaje się przy kołach i blobach, ale na szerokim przycisku dają spłaszczone rogi.

Po co wpisywać wymiary elementu?

Bez nich nie da się przeliczyć procentów na piksele ani sprawdzić, czy rogi się mieszczą. Puste pola oznaczają element 200 × 120 px. Sama reguła CSS od wymiarów nie zależy, zmienia się tylko podgląd i tabela faktycznych promieni.

Jak zrobić w CSS kształt bloba?

Wklej osiem wartości w procentach, cztery przed ukośnikiem i cztery po nim, np. 30% 70% 70% 30% / 30% 30% 70% 70%. Generator pokaże kształt na elemencie o wpisanych wymiarach i poda klasę Tailwind rounded-[30%_70%_70%_30%/30%_30%_70%_70%]. Zmieniając pojedyncze liczby, zobaczysz od razu, który róg się wybrzusza.

Powiązane narzędzia

Walidator Adresu E-mail

Sprawdzi składnię jednego adresu albo całej listy, literówki w domenach i duplikaty - Zobacz generator

Kalkulator Nieśności Kur

Ile jajek dziennie da stado według wieku i rasy kur i ile kosztuje pasza na jedno jajko - Zobacz kalkulator

Generator Tabliczki Mnożenia

Tabliczka mnożenia do druku i karty ćwiczeń z kluczem odpowiedzi - Zobacz generator

Generator Gradient CSS

Tło liniowe albo radialne do tego samego elementu - Zobacz generator

Generator .htaccess

Kompresja i pamięć podręczna dla plików CSS na serwerze Apache - Zobacz generator

Formatowanie JSON

Uporządkuje plik z tokenami projektu, w którym trzymasz promienie - Zobacz generator

Regex Tester

Znajdzie wszystkie deklaracje border-radius w arkuszu stylów - Zobacz generator

Kodowanie Base64

Osadzi mały obrazek w CSS jako adres data: - Zobacz generator