Границы
Утилиты для управления шириной границ элемента.
| Class | Styles |
|---|---|
border | border-width: 1px; |
border-<number> | border-width: <number>px; |
border-(length:<custom-property>) | border-width: var(<custom-property>); |
border-[<value>] | border-width: <value>; |
border-x | border-inline-width: 1px; |
border-x-<number> | border-inline-width: <number>px; |
border-x-(length:<custom-property>) | border-inline-width: var(<custom-property>); |
border-x-[<value>] | border-inline-width: <value>; |
border-y | border-block-width: 1px; |
border-y-<number> | border-block-width: <number>px; |
border-y-(length:<custom-property>) | border-block-width: var(<custom-property>); |
border-y-[<value>] | border-block-width: <value>; |
border-s | border-inline-start-width: 1px; |
border-s-<number> | border-inline-start-width: <number>px; |
border-s-(length:<custom-property>) | border-inline-start-width: var(<custom-property>); |
border-s-[<value>] | border-inline-start-width: <value>; |
border-e | border-inline-end-width: 1px; |
border-e-<number> | border-inline-end-width: <number>px; |
border-e-(length:<custom-property>) | border-inline-end-width: var(<custom-property>); |
border-e-[<value>] | border-inline-end-width: <value>; |
border-t | border-top-width: 1px; |
border-t-<number> | border-top-width: <number>px; |
border-t-(length:<custom-property>) | border-top-width: var(<custom-property>); |
border-t-[<value>] | border-top-width: <value>; |
border-r | border-right-width: 1px; |
border-r-<number> | border-right-width: <number>px; |
border-r-(length:<custom-property>) | border-right-width: var(<custom-property>); |
border-r-[<value>] | border-right-width: <value>; |
border-b | border-bottom-width: 1px; |
border-b-<number> | border-bottom-width: <number>px; |
border-b-(length:<custom-property>) | border-bottom-width: var(<custom-property>); |
border-b-[<value>] | border-bottom-width: <value>; |
border-l | border-left-width: 1px; |
border-l-<number> | border-left-width: <number>px; |
border-l-(length:<custom-property>) | border-left-width: var(<custom-property>); |
border-l-[<value>] | border-left-width: <value>; |
divide-x | & > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: 1px;
} |
divide-x-<number> | & > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: <number>px;
} |
divide-x-(length:<custom-property>) | & > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: var(<custom-property>);
} |
divide-x-[<value>] | & > :not(:last-child) {
border-inline-start-width: 0px;
border-inline-end-width: <value>;
} |
divide-y | & > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: 1px;
} |
divide-y-<number> | & > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: <number>px;
} |
divide-y-(length:<custom-property>) | & > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: var(<custom-property>);
} |
divide-y-[<value>] | & > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: <value>;
} |
divide-x-reverse | --tw-divide-x-reverse: 1; |
divide-y-reverse | --tw-divide-y-reverse: 1; |
Используйте утилиты border или border-<number> вроде border-2 и border-4 для установки ширины границы со всех сторон элемента:
border
border-2
border-4
border-8
<div class="border border-indigo-600 ..."></div><div class="border-2 border-indigo-600 ..."></div><div class="border-4 border-indigo-600 ..."></div><div class="border-8 border-indigo-600 ..."></div>Используйте утилиты вроде border-r и border-t-4 для установки ширины границы с одной стороны элемента:
border-t-4
border-r-4
border-b-4
border-l-4
<div class="border-t-4 border-indigo-500 ..."></div><div class="border-r-4 border-indigo-500 ..."></div><div class="border-b-4 border-indigo-500 ..."></div><div class="border-l-4 border-indigo-500 ..."></div>Используйте утилиты вроде border-x и border-y-4 для одновременной установки ширины границы на двух сторонах элемента:
border-x-4
border-y-4
<div class="border-x-4 border-indigo-500 ..."></div><div class="border-y-4 border-indigo-500 ..."></div>Используйте утилиты вроде border-s и border-e-4 для установки логических свойств border-inline-start-width и border-inline-end-width, которые соответствуют левой или правой границе в зависимости от направления текста:
Left-to-right
Right-to-left
<div dir="ltr"> <div class="border-s-4 ..."></div></div><div dir="rtl"> <div class="border-s-4 ..."></div></div>Используйте утилиты вроде divide-x и divide-y-4 для добавления границ между дочерними элементами:
<div class="grid grid-cols-3 divide-x-4"> <div>01</div> <div>02</div> <div>03</div></div>Если ваши элементы расположены в обратном порядке (используя flex-row-reverse или flex-col-reverse), используйте утилиты divide-x-reverse или divide-y-reverse, чтобы граница добавлялась к правильной стороне каждого элемента:
<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200"> <div>01</div> <div>02</div> <div>03</div></div>Используйте синтаксис border-[<value>] , чтобы задать border width на основе полностью пользовательского значения:
<div class="border-[2vw] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: border-(length:<custom-property>)
<div class="border-(length:--my-border-width) ..."> <!-- ... --></div>Это просто сокращение, border-[length:var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a border-width утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="border-2 md:border-t-4 ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.