Границы

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

На этой странице

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

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

Добавление

Добавьте границы к пользовательским элементам:

html

<spanclass="border"></span><spanclass="border-top"></span><spanclass="border-end"></span><spanclass="border-bottom"></span><spanclass="border-start"></span>

Вычитание

Или удалить границы:

html

<spanclass="border border-0"></span><spanclass="border border-top-0"></span><spanclass="border border-end-0"></span><spanclass="border border-bottom-0"></span><spanclass="border border-start-0"></span>

Цвет

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

html

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

Или измените border-color компонента по умолчанию:

Адрес электронной почты

Опасный заголовок

Изменение цвета и ширины границы

html

<divclass="mb-4"><labelfor="exampleFormControlInput1"class="form-label">Адрес электронной почты</label><inputtype="email"class="form-control border-success"id="exampleFormControlInput1"placeholder="name@example.com"></div><divclass="h4 pb-2 mb-4 text-danger border-bottom border-danger"> Опасный заголовок
</div><divclass="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end"> Изменение цвета и ширины границы
</div>

Непрозрачность

Добавлено в версии 5.2.0

Утилиты Bootstrap border-{color} генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.

Как это устроено

Рассмотрим нашу стандартную утилиту .border-success.

.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important;}

Мы используем RGB-версию нашей переменной CSS --bs-success (со значением 25, 135, 84) и присоединяем вторую переменную CSS, --bs-border-opacity, для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .border-success, ваше вычисленное значение color равно rgba(25, 135, 84, 1). Локальная переменная CSS внутри каждого класса .border-* позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют измененной альфа-прозрачности автоматически.

Пример

Чтобы изменить эту непрозрачность, переопределите --bs-border-opacity с помощью пользовательских стилей или встроенных стилей.

Это граница успеха по умолчанию

Это граница успеха с непрозрачностью 50%

html

<divclass="border border-success p-2 mb-2">Это граница успеха по умолчанию</div><divclass="border border-success p-2"style="--bs-border-opacity: .5;">Это граница успеха с непрозрачностью 50%</div>

Или выберите любую из утилит .border-opacity:

Это граница успеха по умолчанию

Это граница успеха с непрозрачностью 75%

Это граница успеха с непрозрачностью 50%

Это граница успеха с непрозрачностью 25%

Это граница успеха с непрозрачностью 10%

html

<divclass="border border-success p-2 mb-2">Это граница успеха по умолчанию</div><divclass="border border-success p-2 mb-2 border-opacity-75">Это граница успеха с непрозрачностью 75%</div><divclass="border border-success p-2 mb-2 border-opacity-50">Это граница успеха с непрозрачностью 50%</div><divclass="border border-success p-2 mb-2 border-opacity-25">Это граница успеха с непрозрачностью 25%</div><divclass="border border-success p-2 border-opacity-10">Это граница успеха с непрозрачностью 10%</div>

Ширина

html

<spanclass="border border-1"></span><spanclass="border border-2"></span><spanclass="border border-3"></span><spanclass="border border-4"></span><spanclass="border border-5"></span>

Радиус

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

html

<imgsrc="..."class="rounded"alt="..."><imgsrc="..."class="rounded-top"alt="..."><imgsrc="..."class="rounded-end"alt="..."><imgsrc="..."class="rounded-bottom"alt="..."><imgsrc="..."class="rounded-start"alt="..."><imgsrc="..."class="rounded-circle"alt="..."><imgsrc="..."class="rounded-pill"alt="...">

Размеры

Используйте классы масштабирования для больших или меньших закругленных углов. Размеры варьируются от 0 до 3 и могут быть настроены путем изменения API утилит.

html

<imgsrc="..."class="rounded-0"alt="..."><imgsrc="..."class="rounded-1"alt="..."><imgsrc="..."class="rounded-2"alt="..."><imgsrc="..."class="rounded-3"alt="..."><imgsrc="..."class="rounded-4"alt="..."><imgsrc="..."class="rounded-5"alt="...">

CSS

Переменные

--#{$prefix}border-width:#{$border-width};--#{$prefix}border-style:#{$border-style};--#{$prefix}border-color:#{$border-color};--#{$prefix}border-color-translucent:#{$border-color-translucent};--#{$prefix}border-radius:#{$border-radius};--#{$prefix}border-radius-sm:#{$border-radius-sm};--#{$prefix}border-radius-lg:#{$border-radius-lg};--#{$prefix}border-radius-xl:#{$border-radius-xl};--#{$prefix}border-radius-2xl:#{$border-radius-2xl};--#{$prefix}border-radius-pill:#{$border-radius-pill};

Sass Переменные

$border-width:1px;$border-widths:(1:1px,2:2px,3:3px,4:4px,5:5px);$border-style:solid;$border-color:$gray-300;$border-color-translucent:rgba($black,.175);

$border-radius:.375rem;$border-radius-sm:.25rem;$border-radius-lg:.5rem;$border-radius-xl:1rem;$border-radius-2xl:2rem;$border-radius-pill:50rem;

Sass Миксины

@mixin border-radius($radius:$border-radius,$fallback-border-radius:false){@if$enable-rounded{border-radius:valid-radius($radius);}@else if$fallback-border-radius!=false{border-radius:$fallback-border-radius;}}@mixin border-top-radius($radius:$border-radius){@if$enable-rounded{border-top-left-radius:valid-radius($radius);border-top-right-radius:valid-radius($radius);}}@mixin border-end-radius($radius:$border-radius){@if$enable-rounded{border-top-right-radius:valid-radius($radius);border-bottom-right-radius:valid-radius($radius);}}@mixin border-bottom-radius($radius:$border-radius){@if$enable-rounded{border-bottom-right-radius:valid-radius($radius);border-bottom-left-radius:valid-radius($radius);}}@mixin border-start-radius($radius:$border-radius){@if$enable-rounded{border-top-left-radius:valid-radius($radius);border-bottom-left-radius:valid-radius($radius);}}@mixin border-top-start-radius($radius:$border-radius){@if$enable-rounded{border-top-left-radius:valid-radius($radius);}}@mixin border-top-end-radius($radius:$border-radius){@if$enable-rounded{border-top-right-radius:valid-radius($radius);}}@mixin border-bottom-end-radius($radius:$border-radius){@if$enable-rounded{border-bottom-right-radius:valid-radius($radius);}}@mixin border-bottom-start-radius($radius:$border-radius){@if$enable-rounded{border-bottom-left-radius:valid-radius($radius);}}

API утилит

Пограничные утилиты объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

"border":(property:border,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-top":(property:border-top,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-end":(property:border-right,class:border-end,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-bottom":(property:border-bottom,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-start":(property:border-left,class:border-start,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-color":(property:border-color,class:border,local-vars:("border-opacity":1),values:$utilities-border-colors),"border-width":(css-var:true,css-variable-name:border-width,class:border,values:$border-widths),"border-opacity":(css-var:true,class:border-opacity,values:(10:.1,25:.25,50:.5,75:.75,100:1)),

"rounded":(property:border-radius,class:rounded,values:(null:var(--#{$prefix}border-radius),0:0,1:var(--#{$prefix}border-radius-sm),2:var(--#{$prefix}border-radius),3:var(--#{$prefix}border-radius-lg),4:var(--#{$prefix}border-radius-xl),5:var(--#{$prefix}border-radius-2xl),circle:50%,pill:var(--#{$prefix}border-radius-pill))),"rounded-top":(property:border-top-left-radiusborder-top-right-radius,class:rounded-top,values:(null:var(--#{$prefix}border-radius))),"rounded-end":(property:border-top-right-radiusborder-bottom-right-radius,class:rounded-end,values:(null:var(--#{$prefix}border-radius))),"rounded-bottom":(property:border-bottom-right-radiusborder-bottom-left-radius,class:rounded-bottom,values:(null:var(--#{$prefix}border-radius))),"rounded-start":(property:border-bottom-left-radiusborder-top-left-radius,class:rounded-start,values:(null:var(--#{$prefix}border-radius))),