Border Radius

Часть раздела Styling with 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". Установите border в значение 3px solid #4287f5 и border-radius в значение 15px, чтобы придать всем углам одинаковую закругленную форму.
Напишите правило CSS, используя селектор класса, чтобы выбрать все элементы с классом "two". Установите border в любое значение и border-radius в любое значение по вашему выбору.

Шпаргалка

Свойство border-radius создает скругленные углы для элементов:

selector {
    border-radius: value;
}

Значения могут быть указаны в пикселях (px), em (em), процентах (%) или других допустимых единицах измерения CSS.

Одно значение — применяет одинаковый радиус ко всем углам:

div {
    border-radius: 10px;
}

Четыре значения — индивидуально для каждого угла (верхний левый, верхний правый, нижний правый, нижний левый):

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

Два значения — первое применяется к верхнему левому и нижнему правому углам, второе — к верхнему правому и нижнему левому:

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

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

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