Границы (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
Примеры
Базовое скругление
Круглая граница