Zaokrąglone rogi w CSS — border-radius w praktyce

Podstawa

.karta { border-radius: 12px; } .awatar { border-radius: 50%; } .etykieta { border-radius: 999px; }

Wartości dobierzesz w generatorze border-radius.

Spójność

Ustal kilka wielkości, np. 6, 12 i 20 px. Mniejsze elementy dostają mniejszy promień. Karta z cieniem z generatora cieni i poradnika cienie i głębia wygląda spójniej, gdy cały interfejs trzyma się jednej skali.

Zagnieżdżone rogi

Gdy karta ma padding, wewnętrzny promień zwykle powinien być mniejszy od zewnętrznego. Tło z generatora gradientów również przycina się do zaokrągleń. Układ kart przygotuje Flexbox.

Elipsy i zapis z ukośnikiem

Zapis border-radius: 40px / 20px tworzy eliptyczne rogi: pierwsza wartość działa poziomo, druga pionowo. Pozwala to uzyskać nieregularne kształty. Dostępne są też właściwości pojedyncze, np. border-top-left-radius.

Przycinanie zawartości

Gdy karta ma zdjęcie na górze, samo zaokrąglenie karty nie obetnie obrazu. Dodaj overflow: hidden do karty. Pamiętaj, że przytnie to też cienie i rozwijane menu wewnątrz.

Promień wewnętrzny

promień wewnętrzny = promień zewnętrzny − odstęp

Przy karcie 20 px z paddingiem 8 px obrazek wewnątrz wygląda dobrze przy promieniu około 12 px. Taki detal sprawia, że rogi są współśrodkowe.

Styl marki

Duże promienie dają przyjazny wygląd, a małe bardziej techniczny. Zapisz wartości jako zmienne, np. --promien-m: 12px, aby cały serwis pozostał spójny.