Generator border-radius

Jak korzystać z generatora border-radius

1. Przeciągaj kropki na krawędziach podglądu. Każda kolorowa kropka ustawia poziomy promień narożnika; gdy zaznaczysz Narożniki eliptyczne (8 wartości), białe kropki ustawiają promienie pionowe.
2. Możesz też wpisać dokładne wartości w sekcji Narożniki: Lewy górny, Prawy górny, Prawy dolny i Lewy dolny, każdy z polami Poziomo i Pionowo.
3. Wybierz Jednostka: % (procent rozmiaru elementu) lub px (piksele). Przełączenie przelicza bieżące wartości, więc kształt się nie zmienia.
4. Ustaw Szerokość elementu (px) i Wysokość elementu (px) zgodnie ze swoim elementem, a suwak Wszystkie narożniki zaokrągla wszystkie rogi naraz.
5. Wypróbuj Gotowe kształty (Zaokrąglony, Pigułka, Koło, Liść, Kropla, Jajko, Bilet i trzy bloby) albo kliknij Losowy blob, aby uzyskać organiczny kształt.
6. Zaznacz Właściwości rozpisane, jeśli wolisz cztery deklaracje border-*-radius, a potem skopiuj Kod CSS przyciskiem Kopiuj.

Klawiatura: ustaw fokus na kropce i naciskaj strzałki, aby zmieniać jej promień o jeden krok (o 10 z wciśniętym Shift).

Składnia border-radius

border-radius przyjmuje od jednej do czterech wartości w kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny. Podobnie jak przy marginesach brakujące wartości są kopiowane z przeciwległego narożnika: border-radius: 10px 20px zaokrągla lewy górny i prawy dolny róg o 10px, a dwa pozostałe o 20px. Narzędzie zawsze zapisuje najkrótszą równoważną postać.

Każdy narożnik to w rzeczywistości ćwiartka elipsy o dwóch promieniach. Ukośnik oddziela promienie poziome od pionowych, co daje maksymalnie osiem wartości:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Przed ukośnikiem są promienie poziome czterech narożników, po nim – promienie pionowe. Gdy obie listy są identyczne, część po ukośniku jest pomijana.

Piksele czy procenty?

• px daje tę samą krzywiznę niezależnie od rozmiaru elementu. To dobry wybór dla przycisków, kart i pól formularzy: border-radius: 8px.
• % jest względny wobec elementu: promienie poziome liczą się od jego szerokości, pionowe – od wysokości. 50% zmienia kwadrat w koło, a prostokąt w elipsę. Dzięki procentom kształty typu blob skalują się razem z elementem.

Przycisk w kształcie pigułki uzyskasz, stosując promień w pikselach równy co najmniej połowie wysokości. Kształt Pigułka robi dokładnie to dla wpisanego rozmiaru elementu; zadziała też ogromna wartość, np. 999px.

Gdy suma sąsiednich promieni przekracza długość wspólnego boku, przeglądarka proporcjonalnie zmniejsza wszystkie promienie, aż się zmieszczą. Dlatego przeciągnięcie dwóch uchwytów poza siebie nie psuje kształtu.

Kształty blob

Gotowe bloby i Losowy blob używają ośmiu wartości procentowych, w których dwa uchwyty na każdym boku sumują się do 100%. Krzywe spotykają się wtedy idealnie, a kształt przypomina gładki kamyk. Zastosuj CSS transition na border-radius między dwoma blobami, aby uzyskać efekt „morfingu”.