Границы

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

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

Добавьте классы к элементу, чтобы удалить все или не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 image65x65Example top rounded image65x65Example right rounded image65x65Example bottom rounded image65x65Example left rounded image65x65Completely round image65x65Rounded pill image150x75Example non-rounded image (overrides rounding applied elsewhere)65x65
<imgsrc="..."alt="..."class="rounded"><imgsrc="..."alt="..."class="rounded-top"><imgsrc="..."alt="..."class="rounded-right"><imgsrc="..."alt="..."class="rounded-bottom"><imgsrc="..."alt="..."class="rounded-left"><imgsrc="..."alt="..."class="rounded-circle"><imgsrc="..."alt="..."class="rounded-pill"><imgsrc="..."alt="..."class="rounded-0">

Размер

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

Example small rounded image65x65Example large rounded image65x65
<imgsrc="..."alt="..."class="rounded-sm"><imgsrc="..."alt="..."class="rounded-lg">