PL

Generator border-radius CSS

Border radius generator ustawi zaokrąglenie wszystkich rogów naraz lub każdego osobno, w pikselach albo procentach, opcjonalnie eliptycznie z osobnymi promieniami poziomymi i pionowymi. Generator zapisuje wartość w najkrótszej poprawnej postaci, wypisuje cztery właściwości szczegółowe i oblicza, jakich promieni przeglądarka faktycznie użyje przy Twoim rozmiarze pudełka.

Ustaw rogi

border-radius: 24px 8px;
Np. 12px, 50% albo 40px 10px / 20px 5px
px
px
Wpisane dane są zapisywane tylko w tej przeglądarce.

Wynik

Deklaracja CSS (najkrótsza postać)
border-radius: 24px 8px;
Właściwości szczegółowe
WłaściwośćWartość
border-top-left-radius24px
border-top-right-radius8px
border-bottom-right-radius24px
border-bottom-left-radius8px
Użyte promienie przy tym rozmiarze
Rógpoziomopionowo
Lewy górny24 px24 px
Prawy górny8 px8 px
Prawy dolny24 px24 px
Lewy dolny8 px8 px

Jak to obliczamy

Jak przeglądarka odczytuje border-radius

Skrócony zapis przyjmuje od jednej do czterech wartości w kolejności lewy górny, prawy górny, prawy dolny, lewy dolny – zgodnie z ruchem wskazówek zegara. Brakujące wartości są uzupełniane tak samo jak przy margin:

WartośćZnaczenie
12pxwszystkie cztery rogi 12 px
24px 8pxlewy górny i prawy dolny 24 px, prawy górny i lewy dolny 8 px
24px 8px 4pxlewy górny 24 px, prawy górny i lewy dolny 8 px, prawy dolny 4 px
40px 10px / 20px 5pxeliptycznie: promienie poziome przed ukośnikiem, pionowe po nim

Generator skraca każdą wartość do najkrótszej równoważnej postaci: 10px 10px 10px 10px staje się 10px, a ukośnik z identycznymi wartościami znika. Same górne rogi zaokrąglisz np. zapisem 12px 12px 0 0.

Procenty: szerokość i wysokość osobno

Procenty odnoszą się w poziomie do szerokości pudełka, a w pionie do jego wysokości. 50% zamienia więc kwadrat w koło, ale prostokąt 240 × 160 px w elipsę o promieniach 120 px i 80 px. Aby uzyskać okrągły róg na prostokącie, użyj pikseli.

Gdy łuki nachodzą na siebie

Jeśli dwa sąsiednie promienie są razem większe niż wspólny bok, specyfikacja W3C każe przeglądarce przeskalować wszystkie promienie tym samym współczynnikiem f = min(długość boku ÷ suma dwóch promieni na tym boku).

Przykład „pigułka” border-radius: 9999px na przycisku 200 × 40 px: po lewej i prawej suma wynosi 9999 + 9999 = 19 998 px przy wysokości 40 px, więc f = 40 ÷ 19 998 ≈ 0,002. Każdy róg dostaje 9999 × f = 20 px – dokładnie połowę wysokości, więc końce są idealnymi półkolami. „Użyte promienie” pokazują te wartości dla Twojego pudełka.

Najczęściej zadawane pytania

Jak zrobić koło w CSS?

Nadaj kwadratowemu elementowi border-radius: 50%. Na prostokącie 50% da elipsę; dla zaokrąglonych końców (kształt pigułki) użyj bardzo dużej wartości w pikselach, np. 9999px.

Co oznacza ukośnik w border-radius?

Oddziela promienie poziome od pionowych. 40px / 20px zaokrągla każdy róg ćwiartką elipsy o szerokości 40 px i wysokości 20 px. Przy maksymalnie czterech wartościach po każdej stronie daje to łącznie osiem wartości.

Dlaczego zaokrąglenie jest mniejsze, niż ustawiłem?

Bo inaczej łuki nachodziłyby na siebie. Przeglądarka zmniejsza wtedy wszystkie promienie w tej samej proporcji – także rogi, które zmieściłyby się same. Generator pokazuje współczynnik i faktycznie użyte promienie.

W jakiej kolejności podaje się cztery wartości?

Lewy górny, prawy górny, prawy dolny, lewy dolny – zgodnie z ruchem wskazówek zegara od lewego górnego. Właściwości szczegółowe to border-top-left-radius, border-top-right-radius, border-bottom-right-radius i border-bottom-left-radius.

Jak zaokrąglić tylko górne rogi w CSS?

Podaj cztery wartości z zerami na dole, np. border-radius: 12px 12px 0 0 – lewy górny i prawy górny 12 px, dolne rogi proste.

Źródła i podstawa prawna

Stan na:

Podobne narzędzia