1. Границы
  2. border-color

Границы

border-color

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

ClassStyles
border-inherit
border-color: inherit;
border-current
border-color: currentColor;
border-transparent
border-color: transparent;
border-black
border-color: var(--color-black); /* #000 */
border-white
border-color: var(--color-white); /* #fff */
border-red-50
border-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
border-red-100
border-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
border-red-200
border-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
border-red-300
border-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
border-red-400
border-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

Примеры

Базовый пример

Используйте утилиты вроде border-rose-500 и border-lime-100 для управления цветом границы элемента:

border-indigo-500

border-purple-500

border-sky-500

<div class="border-4 border-indigo-500 ..."></div><div class="border-4 border-purple-500 ..."></div><div class="border-4 border-sky-500 ..."></div>

Изменение прозрачности

Используйте модификатор прозрачности цвета для управления прозрачностью цвета границы элемента:

border-indigo-500/100

border-indigo-500/75

border-indigo-500/50

<div class="border-4 border-indigo-500/100 ..."></div><div class="border-4 border-indigo-500/75 ..."></div><div class="border-4 border-indigo-500/50 ..."></div>

Отдельные стороны

Используйте утилиты вроде border-t-indigo-500 и border-r-lime-100 для установки цвета границы одной стороны элемента:

border-t-indigo-500

border-r-indigo-500

border-b-indigo-500

border-l-indigo-500

<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>

Горизонтальные и вертикальные стороны

Используйте утилиты вроде border-x-indigo-500 и border-y-lime-100 для одновременной установки цвета границы на двух сторонах элемента:

border-x-indigo-500

border-y-indigo-500

<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div><div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>

Использование логических свойств

Используйте утилиты вроде border-s-indigo-500 и border-e-lime-100 для установки логических свойств border-inline-start-color и border-inline-end-color, которые соответствуют левой или правой границе в зависимости от направления текста:

Left-to-right

Right-to-left

<div dir="ltr">  <div class="border-s-indigo-500 ..."></div></div><div dir="rtl">  <div class="border-s-indigo-500 ..."></div></div>

Разделитель между дочерними элементами

Используйте утилиты вроде divide-indigo-500 и divide-lime-100 для управления цветом границы между дочерними элементами:

01
02
03
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">  <div>01</div>  <div>02</div>  <div>03</div></div>

Использование пользовательского значения

Используйте синтаксис border-[<value>] , чтобы задать border color на основе полностью пользовательского значения:

<div class="border-[#243c5a] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: border-(<custom-property>)

<div class="border-(--my-border) ...">  <!-- ... --></div>

Это просто сокращение, border-[var(<custom-property>)] которое автоматически добавляет функцию var().

Применение при фокусе

Префикс a border-color утилиты с вариантом, например focus:*, чтобы применить утилиту только в этом состоянии:

<input class="border-2 border-gray-700 focus:border-pink-600 ..." />

Подробнее об использовании вариантов читайте в документации по вариантам.

Адаптивный дизайн

Префикс a border-color утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="border-blue-500 md:border-green-500 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Используйте переменные темы --color-* для настройки утилит color в вашем проекте:

@theme {  --color-regal-blue: #243c5a; }

Теперь утилиту border-regal-blue можно использовать в вашей разметке:

<div class="border-regal-blue">  <!-- ... --></div>

Подробнее о настройке темы читайте в документации темы.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков