Generator border-radius

Ustaw zaokrąglenie każdego rogu i skopiuj kod border-radius. Włącz tryb zaawansowany, aby nadać każdemu rogowi różne promienie poziomy i pionowy i tworzyć organiczne kształty (bloby).

Zaokrąglone rogi

px
px

Kształty:

Lewy górny
Prawy górny
Prawy dolny
Lewy dolny

Jak działa border-radius

border-radius przyjmuje od jednej do czterech wartości, stosowanych zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego rogu: 10px zaokrągla wszystkie rogi jednakowo; 10px 20px nadaje 10px lewemu górnemu i prawemu dolnemu rogowi, a 20px pozostałym dwóm; 10px 20px 30px 40px ustawia każdy osobno. Istnieją też osobne właściwości, np. border-top-left-radius.

Ukośnik pozwala podać różne promienie poziome i pionowe, zamieniając każdy róg w ćwiartkę elipsy: 50% / 60% 60% 40% 40% rysuje jajko. Tak powstają organiczne kształty, czyli „bloby”, tak popularne we współczesnym projektowaniu stron.

Okręgi i pigułki

Aby uzyskać okrąg, użyj border-radius: 50% na kwadratowym pudełku (inaczej powstanie elipsa). Dla pigułki lub przycisku z zaokrąglonymi końcami użyj wartości w pikselach większej niż połowa wysokości, np. 999px: przeglądarka automatycznie ją ograniczy, a kształt nie zniekształci się przy zmianie szerokości.

Zaokrąglone rogi przycinają też tło i cienie, ale nie treść wychodzącą poza pudełko: aby przyciąć obraz, dodaj overflow: hidden.