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

Утилита Bootstrap 5 Border используется для установки стиля элемента границы. Стили границы могут быть следующих цветов: border-color, border-width, border-radius и т. д.

Border-radius используется для установки радиуса границы элемента. Классы border-radius легко добавляют закругленные углы.

Используемые классы радиуса границы:

• rounded: этот класс используется для закругления всех углов элемента.
• rounded-top: этот класс используется для закругления верхних углов элемента.
• rounded-end: этот класс используется для закругления углов правой стороны элемента.
• rounded-bottom: этот класс используется для закругления нижних углов элемента.
• rounded-start: этот класс используется для закругления левых углов элемента.
• rounded-circle: этот класс используется для создания круга элемента.
• rounded-pill: Этот класс используется для создания пилюль элемента.

Синтаксис:

<div class="rounded">
    Content
</div>

Пример 1: В этом примере будут добавлены все классы радиуса границы к элементам изображения, чтобы увидеть их эффекты.

Выход:

Пример 2: В этом примере будут добавлены все классы радиуса границы для элементов div, чтобы увидеть их эффекты.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/utilities/borders/#border-radius