CSS-свойство border-radius: Как создать скругленные углы

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

Содержание

Базовый синтаксис
Что такое радиус?
Подробное объяснение
Примеры использования
Использование второго радиуса
Как создать круглый блок?
Заключение
Визуальный пример

Базовый синтаксис

Простейший способ использования border-radius выглядит так:

.radius {
border-radius: 10px;
}

Посмотрим, как это работает на CodePen.

Что такое радиус?

Радиус — это расстояние от центра окружности до любой точки на окружности. Применительно к CSS, радиус определяет, насколько сильно будут скруглены углы элемента. Представьте, что углы элемента обрезаются по шаблону, который является частью окружности.

Подробное объяснение

Свойство border-radius является сокращением для четырех свойств: border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius. Отсчет идет от верхнего левого угла по часовой стрелке.

Примеры использования

.border {
/* Верхний левый и нижний правый | верхний правый и нижний левый */
border-radius: 10px 10px;

/* Верхний левый | верхний правый и нижний левый | нижний правый */
border-radius: 10px 10px 10px;

/* Верхний левый | верхний правый | нижний правый | нижний левый */
border-radius: 10px 10px 10px 10px;
}

Эти примеры показывают, как установить разные значения радиуса для каждого угла блока, что дает гибкость в дизайне.

Использование второго радиуса

Более продвинутый способ использования border-radius включает в себя два радиуса. Это означает, что каждый угол блока можно обрезать по шаблону, состоящему из двух окружностей.

.radius {
border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
/*
Читается следующим образом:
top-left-up top-right-up bottom-right-down bottom-left-down /
top-left-left top-right-right bottom-right-right bottom-left-left
*/
}

Пример на CodePen.

Как создать круглый блок?

Для создания круглого блока нужно задать одинаковые значения ширины и высоты элемента, а border-radius установить в 50%.

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}

Пример на CodePen.

Заключение

Свойство border-radius в CSS предоставляет мощный инструмент для создания скругленных углов у элементов. Правильное использование этого свойства позволяет достичь различных визуальных эффектов, делая дизайн более привлекательным и разнообразным.

Визуальный пример

Вот наглядная иллюстрация, демонстрирующая использование border-radius в CSS:

Это изображение помогает понять, как свойство border-radius влияет на внешний вид HTML-элементов.