Utilidades · Superficie

Borders (bordes y radios)

Compón presencia, lado, grosor, estilo, color y radio sin recurrir a reglas específicas por componente.

v2.0

Grosores 0–10

Control global o independiente para cada lado del elemento.

Radios completos

Escala hasta 100px, formas circulares y control por lado o esquina.

Color componible

Usa alias semánticos o clases de paleta .border-*.

Base predecible.border, .border-x, .border-y y las variantes por lado crean únicamente un trazo sólido de 1px. No declaran color ni usan !important; sin una utilidad de color conservan el currentColor nativo de CSS.

Código + resultado

Compara composiciones de borde

Cada ejemplo utiliza únicamente clases disponibles en los módulos de borde y color.

Borde real

Elemento de ejemploBase + grosor + estilo + color + radio

Trazo

Grosores y estilos

El grosor se expresa en píxeles y puede aplicarse a todos los lados o a uno específico.

.border-00px

.border-11px

.border-22px

.border-33px

.border-44px

.border-55px

.border-66px

.border-77px

.border-88px

.border-99px

.border-1010px

.border-solidTrazo continuo

.border-dashedTrazo segmentado

.border-dottedTrazo punteado

.border-doubleTrazo doble

.border-hiddenOculto para resolución de tablas

.border-noneSin estilo visible

Convención.border-* es la única familia para estilos y grosores de borde. Para subrayados y tachados usa .decoration-*.

Por ladoInserta t, r, b o l: .border-t-4, .border-r-2, .border-b-1, .border-l-6.

Forma

Escala de radios

La escala incluye 0px, 2px, 4px y luego incrementos de 4px hasta 100px. Para comparar correctamente la curva, cada muestra aplica el valor sólo a la esquina superior izquierda.

.rounded-0Radio: 0px

.rounded-2Radio: 2px

.rounded-4Radio: 4px

.rounded-8Radio: 8px

.rounded-12Radio: 12px

.rounded-16Radio: 16px

.rounded-20Radio: 20px

.rounded-24Radio: 24px

.rounded-28Radio: 28px

.rounded-32Radio: 32px

.rounded-36Radio: 36px

.rounded-40Radio: 40px

.rounded-44Radio: 44px

.rounded-48Radio: 48px

.rounded-52Radio: 52px

.rounded-56Radio: 56px

.rounded-60Radio: 60px

.rounded-64Radio: 64px

.rounded-68Radio: 68px

.rounded-72Radio: 72px

.rounded-76Radio: 76px

.rounded-80Radio: 80px

.rounded-84Radio: 84px

.rounded-88Radio: 88px

.rounded-92Radio: 92px

.rounded-96Radio: 96px

.rounded-100Radio: 100px

Forma rápida · 01

Círculo con `.rounded-c`

La clase aplica el radio completo del sistema. Para obtener un círculo perfecto, el elemento debe conservar una proporción cuadrada.

HTML

<div class="ratio ratio-1-1 border border-2 border-secondary rounded-c">
</div>

.ratio-1-1 garantiza una caja cuadrada y .rounded-c la convierte en círculo.

Resultado aplicado

Forma rápida · 02

Píldora con `.rounded-p`

El radio completo se adapta a la altura del contenido. Es apropiado para etiquetas, estados y acciones compactas.

HTML

<span class="display-inline-block border border-2 border-secondary rounded-p px-24 py-8">
  Estado activo
</span>

El padding determina la proporción; .rounded-p mantiene los extremos completamente curvos.

Resultado aplicado

Estado activo

Control preciso · 03

Radios por lado y esquina

Usa .rounded-{lado}-{valor} para un par de esquinas o .rounded-s-{esquina}-{valor} para una esquina individual.

HTML

<div class="border border-2 border-secondary rounded-t-20 p-24">
  Esquinas superiores
</div>

<div class="border border-2 border-secondary rounded-s-a-20 p-24">
  Esquina superior izquierda
</div>

Los lados usan t, r, b y l; las esquinas usan a, b, c y d.

Resultado aplicado

Esquinas superiores

Esquina superior izquierda

Color

Color independiente de la estructura

El borde se crea primero y el color se aplica después con un alias semántico o una clase de la paleta.

RecomendadoAlias directo

La clase dice exactamente qué lado y qué color aplica. Es la opción más fácil de leer.

<div class="border-t border-t-4 border-t-primary">
  Borde superior primario
</div>

Resultado: borde superior primario

Úsalo cuando el color pertenece a un borde concreto.

PaletaColor explícito

La estructura y el color siguen siendo independientes sin depender de un token interno.

<div class="border-t border-t-4 border-slate-800">
  Borde superior slate 800
</div>

Resultado: borde superior slate 800

Úsalo cuando necesites elegir un tono concreto de la paleta.

Colores semánticos

Muted.border-muted

Inverse.border-inverse

Primary.border-primary

Secondary.border-secondary

Success.border-success

Warning.border-warning

Danger.border-danger

Info.border-info

Escala neutral

Neutral 900.border-900

Neutral 800.border-800

Neutral 700.border-700

Neutral 600.border-600

Neutral 500.border-500

Neutral 400.border-400

Neutral 300.border-300

Neutral 200.border-200

Neutral 100.border-100

Neutral 50.border-50

Valores especiales

Black.border-black

White.border-white

Current color.border-current

Transparent.border-transparent

Referencia

Clases disponibles

Cada ejemplo muestra una composición completa. Lee las clases de izquierda a derecha: creación del borde, grosor, estilo, color y radio.

Clases	Valores	Qué controla	Ejemplo completo	Cómo se interpreta
`.box-*`	`border`, `content`, `initial`, `inherit`, `unset`, `revert`	Define cómo se calculan el ancho y el alto del elemento.	`<div class="box-border">Contenido</div>`	`.box-border` incluye padding y borde dentro de las dimensiones declaradas.
`.border` `.border-{eje\|lado}`	Todos los lados, ejes `x`/`y` o lados `t`, `r`, `b`, `l`	Crea un borde base de 1px y estilo sólido, sin fijar su color.	`<div class="border-t border-t-primary">Contenido</div>`	`.border-t` crea el borde superior y `.border-t-primary` cambia su color.
`.border-{0…10}`	0px a 10px	Cambia el grosor de los cuatro lados; no crea por sí sola el estilo del borde.	`<div class="border border-4 border-primary">Contenido</div>`	`.border` crea el borde y `.border-4` reemplaza su grosor por 4px.
`.border-{lado}-{0…10}`	`t`, `r`, `b`, `l` · 0px a 10px	Cambia el grosor de un lado concreto.	`<div class="border-b border-b-4 border-b-danger">Contenido</div>`	Crea solamente el borde inferior, lo lleva a 4px y aplica el color de peligro.
`.border-{estilo}`	`solid`, `dashed`, `dotted`, `double`, `hidden`, `none`	Modifica el patrón visual del trazo.	`<div class="border border-3 border-dashed border-info">Contenido</div>`	El borde se crea, aumenta a 3px, cambia a segmentado y recibe el color informativo.
`.rounded-{valor}`	0px, 2px, 4px y luego 8px…100px	Redondea simultáneamente las cuatro esquinas.	`<div class="border rounded-16">Contenido</div>`	`.rounded-16` aplica 16px de radio a todo el elemento.
`.rounded-{lado}-{valor}`	Lados `t`, `r`, `b`, `l` · valores 4, 8, 12, 16, 20	Redondea el par de esquinas perteneciente a un lado.	`<div class="border rounded-t-12">Contenido</div>`	`t` afecta las dos esquinas superiores; en este caso ambas reciben 12px.
`.rounded-s-{esquina}-{valor}`	`a` superior izquierda, `b` superior derecha, `c` inferior derecha, `d` inferior izquierda	Redondea una única esquina.	`<div class="border rounded-s-a-8">Contenido</div>`	`a` selecciona la esquina superior izquierda y `8` define un radio de 8px.
`.border-{color}`	Alias directo para todos los lados	Aplica el color de forma independiente a la estructura y al grosor.	`<div class="border border-2 border-success">Contenido</div>`	El borde completo recibe directamente el color semántico de éxito.
`.border-x-{color}`	Eje horizontal: izquierda y derecha	Colorea ambos lados horizontales; no crea sus grosores ni estilos.	`<div class="border-l border-r border-x-danger">Contenido</div>`	`.border-l` y `.border-r` crean los lados; el alias de eje colorea ambos.
`.border-{lado}-{color}`	`t`, `r`, `b`, `l`	Colorea solamente el lado indicado.	`<div class="border-l border-l-4 border-l-danger">Contenido</div>`	Crea el borde izquierdo, establece 4px y aplica el color de peligro sólo a ese lado.

ResponsiveLas variantes responsivas están disponibles en ocho breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840, 6016.

Recomendaciones

Buenas prácticas con bordes

Compón responsabilidades

Declara por separado presencia, grosor, estilo, color y radio.

Usa box-border

Incluye padding y borde dentro de las dimensiones declaradas del componente.

Prefiere alias semánticos

Las clases de color semánticas mantienen consistencia entre temas y estados.

Evita exceso visual

Usa grosores altos y bordes dobles sólo cuando exista una jerarquía clara.

Borders (bordes y radios)

Grosores 0–10

Radios completos

Color componible

Fórmula recomendada

Compara composiciones de borde

Grosores y estilos

Escala de radios

Círculo con .rounded-c

Píldora con .rounded-p

Radios por lado y esquina

Color independiente de la estructura

Colores semánticos

Escala neutral

Valores especiales

Clases disponibles

Buenas prácticas con bordes

Compón responsabilidades

Usa box-border

Prefiere alias semánticos

Evita exceso visual

Círculo con `.rounded-c`

Píldora con `.rounded-p`