Zaokrąglenie rogów

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 40 z 76.

W CSS właściwość border-radius służy do tworzenia zaokrąglonych narożników elementu. Ta właściwość pozwala określić promień krzywizny każdego narożnika, dając kontrolę nad kształtem obramowania elementu. Oto podstawowa składnia użycia właściwości border-radius:

selector {
    border-radius: value;
}

value: Żądany promień zaokrąglonych narożników, który można określić w pikselach (px), emach (em), procentach (%) lub innych prawidłowych jednostkach CSS.

Możesz określić jedną wartość, aby zastosować ten sam promień do wszystkich czterech narożników. W poniższym przykładzie wszystkie elementy <div> będą miały zaokrąglone narożniki o promieniu 10px.

div {
    border-radius: 10px;
}

Możesz ustawić różne wartości dla każdego narożnika osobno, używając następującej kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny.

.button {
    border-radius: 10px 20px 30px 40px;
}

Możesz też podać tylko dwie wartości: pierwsza będzie dotyczyć lewego górnego i prawego dolnego rogu, a druga prawego górnego i lewego dolnego rogu.

img {
    border-radius: 20px 50px;
}

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z dwoma elementami <div>, z których każdy ma klasę "one" lub "two". Wykonaj poniższe kroki:

Napisz regułę CSS z selektorem klasy, która wybiera wszystkie elementy z klasą “one”. Ustaw obramowanie na 3px solid #4287f5, a border-radius na 15px, aby wszystkie rogi miały takie samo zaokrąglenie.
Napisz regułę CSS z selektorem klasy, która wybiera wszystkie elementy z klasą “two”. Ustaw obramowanie na dowolną wartość, a border-radius na dowolną wybraną przez siebie wartość.

Spróbuj swoich sił

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>