Playground de border en CSS

Guía educativa de border

Cómo definir bordes sin perder el control de la caja

Un borde define el límite de una caja. Aprende a elegir estilo, grosor y color, adaptar sus lados a la escritura y conservar las dimensiones y el foco.

Volver al playground

Modelo mental

border combina border-width, border-style y border-color en los cuatro lados.

Las capas del modelo de cajaEsquema estático, sin escala: el borde rodea el padding y el contenido; el margen queda fuera.

1 · ContenidoEl texto o los elementos que contiene la caja.
2 · PaddingEspacio interior entre el contenido y el borde.
3 · BordeEl límite que dibujas con grosor, estilo y color.
4 · MargenEspacio exterior que separa la caja de las demás.

El orden habitual es grosor, estilo y color: border: 2px solid usa currentColor, el color de texto del elemento. Si omites el grosor se usa medium; si omites el estilo se usa none y el borde no se dibuja.

solid dibuja una línea continua; dashed y dotted usan trazos o puntos; double dibuja dos líneas dentro del grosor total. groove, ridge, inset y outset producen relieves. Elige un estilo legible y no uses solo el color para comunicar un estado.

Usa border-width, border-style y border-color para cambiar una dimensión sin reiniciar las otras. Con cuatro valores, estas propiedades siguen el orden top, right, bottom, left; con dos, vertical y horizontal.

Lados físicos y lógicos

Elige lados físicos para una posición fija y lados lógicos para seguir la dirección del contenido.

border-top, border-right, border-bottom y border-left fijan un lado físico. border-block agrupa inicio y final del eje de bloque; border-inline agrupa los del eje de texto. border-inline-start sigue direction y writing-mode: en escritura horizontal está a la izquierda en LTR y a la derecha en RTL.

Un acento que sigue la escritura

LTR — Nota con acento al inicio

RTL — Nota con acento al inicio

El mismo CSS coloca el borde grueso al inicio del texto: izquierda en LTR y derecha en RTL. Los bordes finos discontinuos permiten distinguir el resto de lados. No se demuestra aquí escritura vertical.

Un acento que sigue la escritura

HTML

<p class="border-guide-accent" dir="ltr">LTR — Nota con acento al inicio</p>
<p class="border-guide-accent" dir="rtl">RTL — Nota con acento al inicio</p>

CSS

:root {
  color-scheme: light dark;
}

.border-guide-accent {
  box-sizing: border-box;
  margin: 0;
  padding: 1rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 94%, white), color-mix(in oklch, oklch(0.22 0.024 260) 92%, black));
  border-block-start: 2px dashed #38bdf8;
  border-inline-end: 2px dashed #38bdf8;
  border-block-end: 2px dashed #38bdf8;
  border-inline-start: 10px solid #f97316;
}

Border, outline y dimensiones

border participa en el modelo de caja; outline se dibuja sin reservar espacio en el layout.

Con content-box, el ancho indicado corresponde al contenido: padding y border se suman. Con border-box, ambos quedan dentro del ancho indicado y reducen el espacio de contenido. outline no cambia ese ancho y puede solaparse con elementos cercanos.

Tres cajas con el mismo ancho declarado

Con raíz de 16 px, 8rem son 128 px. Sin padding: content-box más dos bordes de 8 px mide 144 px; border-box mide 128 px; la caja con outline mide 128 px en el layout. Su contorno se extiende por fuera.

Tres cajas con el mismo ancho declarado

HTML

<div class="border-guide-boxes">
  <button type="button" class="border-guide-box content-box">Borde: content-box</button>
  <button type="button" class="border-guide-box border-box">Borde: border-box</button>
  <button type="button" class="border-guide-box outline-box">Solo outline</button>
</div>

CSS

:root {
  color-scheme: light dark;
}

.border-guide-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem;
}

.border-guide-box {
  inline-size: 8rem;
  padding: 0;
  border: 8px solid light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 94%, white), color-mix(in oklch, oklch(0.22 0.024 260) 92%, black));
  font: inherit;
  overflow-wrap: anywhere;

  &.content-box {
    box-sizing: content-box;
  }

  &.border-box {
    box-sizing: border-box;
  }

  &.outline-box {
    box-sizing: border-box;
    border: 0;
    outline: 8px solid light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
  }

  &:focus-visible {
    outline: 3px dashed light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
    outline-offset: 10px;
  }
}

La receta añade un outline de foco separado mediante outline-offset. Pruébalo con Tab: evita cambios de tamaño al enfocar y conserva una señal visible. Sustituye los tokens de color del proyecto por los de tu interfaz al reutilizar el CSS.

Errores frecuentes

Antes de aumentar el grosor, revisa el estilo, la cascada y el modelo de caja.

El borde no aparece

Resultado esperado: Una línea visible alrededor de la caja.
Causa: border: 4px omite el estilo; su valor inicial es none y el grosor calculado resulta cero.
Solución: Indica un estilo, por ejemplo border: 4px solid, y comprueba que el grosor no sea cero.

Desaparece el color o la imagen

Resultado esperado: Cambiar solo el grosor sin alterar el resto.
Causa: Un shorthand posterior reinicia lo omitido y también border-image.
Solución: Usa border-width si solo cambias grosor; si necesitas border-image, decláralo después del shorthand.

La caja crece o el contenido se estrecha

Resultado esperado: Conservar el tamaño previsto y el contenido legible.
Causa: content-box suma padding y borde; border-box los descuenta del espacio de contenido.
Solución: Elige box-sizing conscientemente, revisa mínimos y evita aumentar el borde en foco si provoca saltos.

El foco deja de verse

Resultado esperado: Identificar por teclado el elemento activo.
Causa: Se elimina outline sin proporcionar otra señal visible.
Solución: Conserva el foco nativo o añade un :focus-visible claro; no recortes el contorno con overflow.

Soporte y compatibilidad

Consulta el estado Baseline de border y distingue los bordes clásicos de otras propiedades experimentales.

border y los bordes lógicos son funciones ampliamente disponibles. La tarjeta refleja los datos Baseline; los ejemplos muestran comportamiento nativo del navegador actual.

Explora outline y su separación respecto al borde.