Для задания блоку закругленных углов в CSS, вы можете использовать свойство border-radius. Это свойство позволяет задавать радиус скругления углов элемента.
Синтаксис свойства border-radius выглядит следующим образом:
border-radius: значение;
Значение может быть указано в пикселях (px) или процентах (%), а также может быть указано отдельно для каждого угла.
Основные варианты указания радиуса закругления углов:
1. Одно значение: указывается одно значение, которое будет применяться ко всем углам элемента. Например:
border-radius: 10px;
2. Два значения: указываются два значения, первое для верхнего левого и нижнего правого углов, второе для верхнего правого и нижнего левого углов. Например:
border-radius: 10px 20px;
3. Четыре значения: указываются четыре значения, которые применяются поочередно к каждому углу элемента, начиная с верхнего левого угла и заканчивая нижним правым. Например:
border-radius: 10px 20px 30px 40px;
4. Проценты: радиус закругления может быть указан в процентах от ширины или высоты элемента. Например:
border-radius: 50%;
5. Отдельно для каждого угла: можно указать отдельное значение для каждого угла элемента, начиная с верхнего левого угла и двигаясь по часовой стрелке. Например:
border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
Также можно использовать ключевые слова для задания более сложных форм закругления, таких как ellipse, которое создает эллиптическую форму закругления.
Примеры использования:
1. Простое задание равного радиуса закругления у всех углов элемента:
.border {
border-radius: 10px;
}
2. Задание разного радиуса закругления для верхних и нижних углов элемента:
.border {
border-radius: 10px 20px;
}
3. Задание разного радиуса закругления для каждого угла элемента:
.border {
border-radius: 10px 20px 30px 40px;
}
Это основные способы задания закругления углов в CSS. Вы можете экспериментировать с различными значениями радиуса, чтобы достичь нужного эффекта для вашего элемента.