Cмотреть на GitHub

Границы

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

Границы элемента

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

Добавочный

<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>

Границы радиуса

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

Example rounded image75x75 Example top rounded image75x75 Example right rounded image75x75 Example bottom rounded image75x75 Example left rounded image75x75 Completely round image75x75 Rounded pill image150x75 Example non-rounded image (overrides rounding applied elsewhere)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 для большего или меньшего радиуса границы.

Example small rounded image75x75 Example large rounded image75x75 
<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">