Радиус границы

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 40 из 76.

В CSS свойство border-radius используется для создания скруглённых углов элемента. Это свойство позволяет задать радиус скругления для каждого угла, чтобы управлять формой границы элемента. Вот базовый синтаксис использования свойства border-radius:

selector {
    border-radius: value;
}

value: Желаемый радиус скруглённых углов, который можно задать в пикселях (px), em (em), процентах (%) или других допустимых единицах CSS.

Можно указать одно значение, чтобы применить одинаковый радиус ко всем четырём углам. В следующем примере у всех элементов <div> будут скруглённые углы с радиусом 10px.

div {
    border-radius: 10px;
}

Можно задать разные значения для каждого угла по отдельности, используя следующий порядок: верхний левый, верхний правый, нижний правый, нижний левый.

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

Также можно указать только два значения: первое значение будет применяться к верхнему левому и нижнему правому углам, а второе — к верхнему правому и нижнему левому углам.

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

Задание

Легко

Дан HTML-документ с двумя элементами <div>, каждый из которых имеет классы "one" и "two". Выполни следующие шаги:

Напиши правило CSS с селектором класса, чтобы выбрать все элементы с классом “one”. Задай границу 3px solid #4287f5 и радиус скругления 15px, чтобы все углы были скруглены одинаково.
Напиши правило CSS с селектором класса, чтобы выбрать все элементы с классом “two”. Задай границу любое значение и радиус скругления любое значение на свой выбор.

Попробуйте сами

<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>