DocsBlogGaleríaSociosPlus
  1. Bordes
  2. border-color

Bordes

border-color

Utilidades para controlar el color de los bordes de un elemento.

ClaseEstilos
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) */

Ejemplos

Ejemplo básico

Utiliza utilidades como border-rose-500 y border-lime-100 para controlar el color del borde de un elemento:

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>

Cambiar la opacidad

Utiliza el modificador de opacidad de color para controlar la opacidad del color del borde de un elemento:

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>

Lados individuales

Utiliza utilidades como border-t-indigo-500 y border-r-lime-100 para establecer el color del borde de un lado de un elemento:

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>

Lados horizontales y verticales

Utiliza utilidades como border-x-indigo-500 y border-y-lime-100 para establecer el color del borde en dos lados de un elemento al mismo tiempo:

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>

Usar propiedades lógicas

Utiliza utilidades como border-s-indigo-500 y border-e-lime-100 para establecer las propiedades lógicas border-inline-start-color y border-inline-end-color propiedades lógicas, que se asignan al borde izquierdo o derecho según la dirección del texto:

Izquierda a derecha

Derecha a izquierda

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

Utiliza las utilidades border-bs-* y border-be-* para establecer las propiedades lógicas border-block-start-color y border-block-end-color, que se asignan al borde superior o inferior según el modo de escritura:

<div class="border-bs-indigo-500 ..."></div>

Divisor entre elementos hijos

Utiliza utilidades como divide-indigo-500 y divide-lime-100 para controlar el color del borde entre los elementos hijos:

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>

Usar un valor personalizado

Usa la sintaxis border-[<value>] para establecer el/la color del borde basándose en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis border-(<custom-property>) :

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

Esto es solo un atajo para border-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Aplicar en focus

Antepone a la utilidad border-color el prefijo de una variante como focus:* para aplicar la utilidad únicamente en ese estado:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Diseño responsivo

Antepone a la utilidad border-color el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Usa las variables de tema --color-* para personalizar las utilidades de color en tu proyecto:

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

Ahora se puede usar la utilidad border-regal-blue en tu marcado:

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

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.

En esta página

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas