Закругленные края CSS

Закругленные края CSS

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

Обычные края

Скругленные края

Скругленные края

Скругленные края

Пример

p {
  border: 2px solid red;
  border-radius: 5px;
}

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

Более примеров

Все свойства верхней границы в одном заявлении
Этот пример демонстрирует сокращенные свойства, которые используются для установки всех свойств верхней границы в одном заявлении.
Установить стиль нижней границы
Этот пример демонстрирует, как установить стиль нижней границы.
Установить ширину левого края
Этот пример демонстрирует, как установить ширину левого края.
Установить цвет всех четырех краев
Этот пример демонстрирует, как установить цвет всех четырех краев. Они могут иметь от одного до четырех цветов.
Установить цвет правого края
Этот пример демонстрирует, как установить цвет правого края.

Все свойства границ CSS

Свойство Описание
border Краткая форма свойства, которая устанавливает все свойства краев в одном заявлении.
border-color Краткая форма свойства, которая устанавливает цвет всех четырех краев.
border-radius Краткая форма свойства, которая устанавливает все четыре свойства border-*-radius.
border-style Краткая форма свойства, которая устанавливает стиль всех четырех краев.
border-width Краткая форма свойства, которая устанавливает ширину всех четырех краев.
border-bottom Краткая форма свойства, которая устанавливает все свойства нижнего края в одном заявлении.
border-bottom-color Установить цвет нижнего края.
border-bottom-style Установить стиль нижнего края.
border-bottom-width Установить ширину нижнего края.
border-left Краткая форма свойства, которая устанавливает все свойства левого края в одном заявлении.
border-left-color Установить цвет левого края.
border-left-style Установить стиль левого края.
border-left-width Установить ширину левого края.
border-right Краткая форма свойства, которая устанавливает все свойства правого края в одном заявлении.
border-right-color Установить цвет правого края.
border-right-style Установить стиль правого края.
border-right-width Установить ширину правого края.
border-top Краткая форма свойства, которая устанавливает все свойства верхнего края в одном заявлении.
border-top-color Установить цвет верхнего края.
border-top-style Установить стиль верхнего края.
border-top-width Установить ширину верхнего края.