Используйте утилиты для создания границ, чтобы быстро настроить границу и радиус границы элемента. Отлично подходит для изображений, кнопок или любого другого элемента.

Граница

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

Добавка

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

Субтрактивный

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

Цвет границы

Измените цвет границы с помощью утилит, созданных на основе цветов нашей темы.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

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

Добавьте классы к элементу, чтобы легко скруглить его углы.

Пример закругленного изображения75x75 Пример закругленного изображения сверху75x75 Пример закругленного изображения справа75x75 Пример закругленного изображения снизу75x75 Пример закругленного изображения слева75x75 Полностью круглое изображение75x75 Закругленное изображение таблетки150x75 Пример изображения без закруглений (отменяет округление, примененное где-либо еще)75x75
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

Размеры

Используйте .rounded-lg или .rounded-sm для большего или меньшего радиуса границы.

Пример маленького закругленного изображения75x75 Пример большого закругленного изображения75x75
<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">