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 zaokrąglania narożników elementu. Ta właściwość pozwala określić promień zaokrąglenia każdego narożnika, dzięki czemu możesz kontrolować kształt obramowania elementu. Oto podstawowa składnia użycia właściwości border-radius:

selector {
    border-radius: value;
}

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

Możesz określić jedną wartość, aby zastosować taki sam promień zaokrąglenia do wszystkich czterech rogów. W poniższym przykładzie wszystkie elementy <div> będą miały zaokrąglone rogi 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: górny lewy, górny prawy, dolny prawy, dolny lewy.

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

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

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

Wyzwanie

Łatwy

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

Napisz regułę CSS z selektorem klasy, aby wybrać wszystkie elementy z klasą “one”. Ustaw border na 3px solid #4287f5, a border-radius na 15px, aby wszystkie rogi miały takie samo zaokrąglenie.
Napisz regułę CSS z selektorem klasy, aby wybrać wszystkie elementy z klasą “two”. Ustaw border na dowolną wartość, a border-radius na wybraną przez siebie dowolną 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>