Zaokrąglenie rogów

Zastosuj border-radius: 50% do kwadratowego elementu, aby utworzyć idealne koło. Ustaw wszystkie cztery narożniki na 50%.

Tak, border-radius może mieć cztery indywidualne wartości w kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny. Pozwala to tworzyć unikalne niesymetryczne kształty.

Sześć do dwunastu pikseli dla przycisków i osiem do szesnastu dla kart sprawdza się w większości interfejsów. Ważniejsza od dokładnej liczby jest spójność: gdy przyciski i pola tekstowe na tym samym ekranie mają różne promienie, całość czyta się niechlujnie. Jeśli w karcie znajduje się obraz, nadaj elementowi wewnętrznemu nieco mniejszy promień niż zewnętrznemu, inaczej obie krzywe będą się wyraźnie kłócić.

50% oznacza „połowę każdego boku", więc jeśli element nie jest kwadratem, promienie poziomy i pionowy się różnią i powstaje elipsa. Po prawdziwe koło nadaj width i height tę samą wartość albo dodaj aspect-ratio: 1. Jeśli chcesz kształt pigułki na przycisku, którego szerokość zależy od tekstu, użyj dużej stałej wartości w rodzaju 9999px zamiast 50% — końce pozostaną wtedy idealnymi półkolami przy każdej wysokości.