Którą deklarację CSS należy zastosować, aby kwadratowy obraz o wymiarach 100 px × 100 px wyświetlił się na stronie w kształcie koła?
A.
shape-outside: circle();
B.
border-radius: 10%;
C.
border-style: circle;
D.
border-radius: 50%;
Deklaracja border-radius: 50%; jest właściwa, ponieważ właściwość border-radius zaokrągla narożniki elementu. Gdy element ma taki sam rozmiar szerokości i wysokości, czyli w pytaniu 100 px × 100 px, promień zaokrąglenia równy 50% powoduje, że każdy narożnik zostaje zaokrąglony do połowy wymiaru elementu. W efekcie kwadrat zostaje wizualnie przekształcony w koło. Reguła do zapamiętania: dla kwadratowego elementu koło uzyskuje się przez border-radius: 50%;. W praktyce stosuje się to często do zdjęć profilowych, ikon użytkowników lub miniatur. Typowa pułapka polega na użyciu zbyt małej wartości procentowej, która tworzy tylko lekko zaokrąglone rogi, a nie pełne koło.
W tym zadaniu chodzi o zaokrąglenie narożników samego elementu, a nie o ustawienie stylu obramowania ani kształtu opływania tekstu. Deklaracja border-radius: 10%; zaokrągli tylko rogi kwadratowego obrazu, ale nie utworzy koła - efekt będzie przypominał prostokąt z delikatnie zaokrąglonymi narożnikami. Deklaracja border-style: circle; nie jest poprawnym sposobem tworzenia okrągłego kształtu w CSS. Właściwość border-style określa wygląd linii obramowania, na przykład solid, dashed albo dotted, a nie geometrię elementu. Deklaracja shape-outside: circle(); dotyczy sposobu opływania elementu przez tekst i działa w kontekście elementów pływających, ale nie zmienia widocznego kształtu samego obrazu. Poprawna deklaracja to border-radius: 50%;. Typowy błąd polega na skojarzeniu słowa circle z dowolną właściwością CSS albo na uznaniu, że każda wartość procentowa border-radius tworzy koło. Dla kwadratu potrzebne jest dokładnie 50%.