Skip to content

Границы (Border)

Классы для управления границами элементов.

Ширина границ

КлассОписание
.border-0Без границы
.borderГраница 1px
.border-2Граница 2px
.border-3Граница 3px
.border-4Граница 4px
.border-5Граница 5px
border-0
border
border-2
border-3
border-4
border-5

Границы по сторонам

КлассОписание
.border-tВерхняя граница
.border-rПравая граница
.border-bНижняя граница
.border-lЛевая граница
.border-xГоризонтальные границы
.border-yВертикальные границы
border-t
border-r
border-b
border-l
border-x
border-y

Цвет границ

Все стороны

Все цвета палитры доступны через .border-{color}-{brightness}:

По сторонам

Можно окрасить только конкретную сторону:

КлассОписание
.border-t-{color}Верхняя граница
.border-r-{color}Правая граница
.border-b-{color}Нижняя граница
.border-l-{color}Левая граница
top
right
bottom
left

Скругление углов

КлассОписание
.rounded-noneБез скругления
.rounded-smМаленькое скругление
.rounded-baseБазовое скругление
.rounded-lgБольшое скругление
.rounded-xlОчень большое скругление
.rounded-fullПолное скругление (круг)

Важно: Класс .rounded без суффикса не существует — используйте .rounded-base.

none
sm
base
lg
xl
full

Примеры

Базовое скругление
Круглая граница

MIT License