Cмотреть на GitHub

Границы

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

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

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

Добавочный

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

Усеченный

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

Цвета границ

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

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

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

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

Example rounded image75x75Example top rounded image75x75Example right rounded image75x75Example bottom rounded image75x75Example left rounded image75x75Completely round image75x75Rounded pill image150x75Example non-rounded image (overrides rounding applied elsewhere)75x75
<imgsrc="..."class="rounded"alt="..."><imgsrc="..."class="rounded-top"alt="..."><imgsrc="..."class="rounded-right"alt="..."><imgsrc="..."class="rounded-bottom"alt="..."><imgsrc="..."class="rounded-left"alt="..."><imgsrc="..."class="rounded-circle"alt="..."><imgsrc="..."class="rounded-pill"alt="..."><imgsrc="..."class="rounded-0"alt="...">

Размер

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

Example small rounded image75x75Example large rounded image75x75
<imgsrc="..."class="rounded-sm"alt="..."><imgsrc="..."class="rounded-lg"alt="...">