Границы

Адаптивный модификатор .b отображает границы элемента.

Параметры

Использование модификатора: .b{сторона}-{контрольная точка}-{толщина}

  • Сторона. Необязательный параметр. При отсутствии применяет толщину границы ко всем сторонам. Может принимать значения:
    • t – верхняя граница
    • b – нижняя граница
    • l – левая граница
    • r – правая граница
    • x – левая и правая граница
    • y – верхняя и нижняя граница

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

  • Контрольная точка. Необязательный параметр. Отображает границу только для определенного диапазона в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Толщина. Обязательный параметр. Указывает толщину границы. Принимает значение от 0 до 5 (px). Значение 0 – для отсутствия границы.

Возможно сочетания различных границ для разных разрешений экрана:

  • .b-1 .bb-0 – граница в 1px слева, сверху и справа
  • .b-1 .b-sm-2 .b-md-3 – граница в 1px по умолчанию. На небольших устройствах толщина границы 2px, на больших – 3px

Стороны границ

Используйте параметры t, b, l, r, x, y для указания стороны отображения границы.

All
Top
Right
Bottom
Left
Horizontal
Vertical
All (minus) Top
All (minus) Right
All (minus) Bottom
All (minus) Left
<div class="p-3 mb-2 bg-gray-100 b-1">All</div>
<div class="row">
<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bt-1">Top</div></div>
<div class="col-2"><div class="p-3 mb-2 bg-gray-100 br-1">Right</div></div>
<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bb-1">Bottom</div></div>
<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bl-1">Left</div></div>
<div class="col-2"><div class="p-3 mb-2 bg-gray-100 bx-1">Horizontal</div></div>
<div class="col-2"><div class="p-3 mb-2 bg-gray-100 by-1">Vertical</div></div>
</div>
<div class="row">
<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 bt-0">All (minus) Top</div></div>
<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 br-0">All (minus) Right</div></div>
<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 bb-0">All (minus) Bottom</div></div>
<div class="col-3"><div class="p-3 mb-2 bg-gray-100 b-1 bl-0">All (minus) Left</div></div>
</div>

Адаптивные границы

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

All XS
All SM
All MD
All LG
All XL
<div class="p-3 mb-2 bg-gray-100 b-1">All XS</div>	
<div class="p-3 mb-2 bg-gray-100 b-sm-1">All SM</div>
<div class="p-3 mb-2 bg-gray-100 b-md-1">All MD</div>
<div class="p-3 mb-2 bg-gray-100 b-lg-1">All LG</div>
<div class="p-3 mb-2 bg-gray-100 b-xl-1">All XL</div>

Толщина границ

Вы можете использовать параметры толщины границы для изменения ее значения от 1 до 5.

All 1
All 2
All 3
All 4
All 5
<div class="p-3 mb-2 bg-gray-100 b-1">All 1</div>	
<div class="p-3 mb-2 bg-gray-100 b-2">All 2</div>
<div class="p-3 mb-2 bg-gray-100 b-3">All 3</div>
<div class="p-3 mb-2 bg-gray-100 b-4">All 4</div>
<div class="p-3 mb-2 bg-gray-100 b-5">All 5</div>

Стиль границ

По умолчанию границы отображаются сплошной линией. Для измененения стиля границы используйте следующие классы:

  • .b-dotted – dotted (короткий пунктир)
  • .b-dashed – dashed (длинный пунктир)
  • .b-double – double (двойная сплошная)
Solid 1
Solid 2
Solid 3
Solid 4
Solid 5
Dotted 1
Dotted 2
Dotted 3
Dotted 4
Dotted 5
Dashed 1
Dashed 2
Dashed 3
Dashed 4
Dashed 5
Double 1
Double 2
Double 3
Double 4
Double 5
<div class="row">
<div class="col-3">
<div class="p-3 mb-2 bg-gray-100 b-1">Solid 1</div>
<div class="p-3 mb-2 bg-gray-100 b-2">Solid 2</div>
<div class="p-3 mb-2 bg-gray-100 b-3">Solid 3</div>
<div class="p-3 mb-2 bg-gray-100 b-4">Solid 4</div>
<div class="p-3 mb-2 bg-gray-100 b-5">Solid 5</div>
</div>
<div class="col-3">
<div class="p-3 mb-2 bg-gray-100 b-1 b-dotted">Dotted 1</div>
<div class="p-3 mb-2 bg-gray-100 b-2 b-dotted">Dotted 2</div>
<div class="p-3 mb-2 bg-gray-100 b-3 b-dotted">Dotted 3</div>
<div class="p-3 mb-2 bg-gray-100 b-4 b-dotted">Dotted 4</div>
<div class="p-3 mb-2 bg-gray-100 b-5 b-dotted">Dotted 5</div>
</div>
<div class="col-3">
<div class="p-3 mb-2 bg-gray-100 b-1 b-dashed">Dashed 1</div>
<div class="p-3 mb-2 bg-gray-100 b-2 b-dashed">Dashed 2</div>
<div class="p-3 mb-2 bg-gray-100 b-3 b-dashed">Dashed 3</div>
<div class="p-3 mb-2 bg-gray-100 b-4 b-dashed">Dashed 4</div>
<div class="p-3 mb-2 bg-gray-100 b-5 b-dashed">Dashed 5</div>
</div>
<div class="col-3">
<div class="p-3 mb-2 bg-gray-100 b-1 b-double">Double 1</div>
<div class="p-3 mb-2 bg-gray-100 b-2 b-double">Double 2</div>
<div class="p-3 mb-2 bg-gray-100 b-3 b-double">Double 3</div>
<div class="p-3 mb-2 bg-gray-100 b-4 b-double">Double 4</div>
<div class="p-3 mb-2 bg-gray-100 b-5 b-double">Double 5</div>
</div>
</div>

Закругление границ

Использование модификатора: .r{сторона}-{контрольная точка}-{радиус закругления}

  • Сторона. Необязательный параметр. При отсутствии применяет толщину границы ко всем сторонам. Может принимать значения:
    • t – верхняя граница
    • b – нижняя граница
    • l – левая граница
    • r – правая граница
    • x – левая и правая граница
    • y – верхняя и нижняя граница

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

  • Контрольная точка. Необязательный параметр. Отображает закругление границы только для определенного диапазона в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Радиус закругления. Обязательный параметр. Указывает закругления границы. Принимает значение от 0 до 5:
    • 0 – отсутствие закругления
    • 1 – закругление радиусом 0.125rem
    • 2 – закругление радиусом 0.25rem
    • 3 – закругление радиусом 0.5rem
    • 4 – закругление радиусом 1rem
    • 5 – закругление радиусом 2rem
    • 6 – закругление радиусом 4rem
    • 7 – закругление радиусом 4rem

Для полного закругления границ используйте класс circle

Radius 1
Radius 2
Radius 3
Radius 4
Radius 5
Circle
Radius Top 1
Radius Top 2
Radius Top 3
Radius Top 4
Radius Top 5
Radius Right 1
Radius Right 2
Radius Right 3
Radius Right 4
Radius Right 5
Radius Bottom 1
Radius Bottom 2
Radius Bottom 3
Radius Bottom 4
Radius Bottom 5
Radius Left 1
Radius Left 2
Radius Left 3
Radius Left 4
Radius Left 5
Radius Top Left 1
Radius Top Left 2
Radius Top Left 3
Radius Top Left 4
Radius Top Left 5
Radius Top Right 1
Radius Top Right 2
Radius Top Right 3
Radius Top Right 4
Radius Top Right 5
Radius Bottom Left 1
Radius Bottom Left 2
Radius Bottom Left 3
Radius Bottom Left 4
Radius Bottom Left 5
Radius Bottom Right 1
Radius Bottom Right 2
Radius Bottom Right 3
Radius Bottom Right 4
Radius Bottom Right 5
<div class="p-3 mb-2 bg-gray-100 b-1 r-1">Radius 1</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-2">Radius 2</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-3">Radius 3</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-4">Radius 4</div>
<div class="p-3 mb-2 bg-gray-100 b-1 r-5">Radius 5</div>
<div class="p-3 mb-2 bg-gray-100 b-1 circle">Circle</div>

Адаптивное закругление границы

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

Radius XS-0, SM-2, MD-3, LG-4, XL-5
Radius left XS-0, right XS-5, left LG-5, right LG-0
Radius XS-0, top-left SM-5, top-right MD-5, bottom-right LG-5, bottom-left XL-5
<div class="p-4 mb-2 bg-gray-100 b-1 r-0 r-sm-2 r-md-3 r-lg-4 r-xl-5">Radius XS-0, SM-2, MD-3, LG-4, XL-5</div>
<div class="p-4 mb-2 bg-gray-100 b-1 rl-0 rr-5 rl-lg-5 rr-lg-0">Radius left XS-0, right XS-5, left LG-5, right LG-0</div>
<div class="p-4 mb-2 bg-gray-100 b-1 r-0 rtl-sm-5 rtr-md-5 rbr-lg-5 rbl-xl-5">Radius XS-0, top-left SM-5, top-right MD-5, bottom-right LG-5, bottom-left XL-5</div>

Цвет границ

Используйте модификаторы цвета, чтобы изменить цвет границы.

b-primary
b-secondary
b-success
b-info
b-warning
b-danger
b-red
b-pink
b-purple
b-deep-purple
b-indigo
b-blue
b-light-blue
b-cyan
b-teal
b-green
b-light-green
b-lime
b-yellow
b-amber
b-orange
b-deep-orange
b-brown
b-grey
b-blue-grey
<div class="b-1 b-primary p-3 mb-2">b-primary</div>
<div class="b-1 b-secondary p-3 mb-2">b-secondary</div>
<div class="b-1 b-success p-3 mb-2">b-success</div>
<div class="b-1 b-info p-3 mb-2">b-info</div>
<div class="b-1 b-warning p-3 mb-2">b-warning</div>
<div class="b-1 b-danger p-3 mb-2">b-danger</div>
<div class="b-1 b-red p-3 mb-2">b-red</div>
<div class="b-1 b-pink p-3 mb-2">b-pink</div>
<div class="b-1 b-purple p-3 mb-2">b-purple</div>
<div class="b-1 b-deep-purple p-3 mb-2">b-deep-purple</div>
<div class="b-1 b-indigo p-3 mb-2">b-indigo</div>
<div class="b-1 b-blue p-3 mb-2">b-blue</div>
<div class="b-1 b-light-blue p-3 mb-2">b-light-blue</div>
<div class="b-1 b-cyan p-3 mb-2">b-cyan</div>
<div class="b-1 b-teal p-3 mb-2">b-teal</div>
<div class="b-1 b-green p-3 mb-2">b-green</div>
<div class="b-1 b-light-green p-3 mb-2">b-light-green</div>
<div class="b-1 b-lime p-3 mb-2">b-lime</div>
<div class="b-1 b-yellow p-3 mb-2">b-yellow</div>
<div class="b-1 b-amber p-3 mb-2">b-amber</div>
<div class="b-1 b-orange p-3 mb-2">b-orange</div>
<div class="b-1 b-deep-orange p-3 mb-2">b-deep-orange</div>
<div class="b-1 b-brown p-3 mb-2">b-brown</div>
<div class="b-1 b-grey p-3 mb-2">b-grey</div>
<div class="b-1 b-blue-grey p-3 mb-2">b-blue-grey</div>

Совмещение параметров

Вы можете совмещать любые модификаторы границ, чтобы добиться требуемого отображения.

color + different size - bottom border
color + different adaptive size
dotted + color + different size
Primary, Double, Size-3 Radius XS-0, SM-2, MD-3, LG-4, XL-5
Secondary, Size-2, dassed, Radius left XS-0, right XS-5, left LG-5, right LG-0
<div class="p-4 mb-2 bg-gray-100 bt-1 br-2 bl-4 bb-0  b-blue ">color + different size - bottom border</div>
<div class="p-4 mb-2 bg-gray-100 bt-1 br-xl-2 bb-lg-2 bl-md-4 b-green ">color + different adaptive size</div>
<div class="p-4 mb-2 bg-gray-100 bt-1 br-2 bb-3 bl-4 b-dotted b-red ">dotted + color + different size</div>
<div class="p-4 mb-2 bg-gray-100 b-3 b-primary b-double r-0 r-sm-2 r-md-3 r-lg-4 r-xl-5">Primary, Double, Size-3 Radius XS-0, SM-2, MD-3, LG-4, XL-5</div>
<div class="p-4 mb-2 bg-gray-100 b-2 b-secondary b-dashed rl-0 rr-5 rl-lg-5 rr-lg-0">Secondary, Size-2, dassed, Radius left XS-0, right XS-5, left LG-5, right LG-0</div>