Docs ejecutables de CSS: Bordes en CSS

Q: ¿Cómo agrego un borde en CSS?

Usa la abreviatura con un grosor, un estilo y un color: border: 2px solid #2563eb;. El estilo es la parte más importante: sin él, border-style vale none y no se dibuja ningún borde.

Q: ¿Por qué no se ve mi borde en CSS?

Casi siempre porque no hay un estilo de borde. border: 2px #2563eb; o border-color: red; por sí solos no dibujan nada, porque el border-style por defecto es none. Agrega solid, dashed u otro estilo.

Q: ¿Cómo hago esquinas redondeadas en CSS?

Usa border-radius: border-radius: 8px; redondea las cuatro esquinas. border-radius: 50%; en un cuadrado hace un círculo, y un valor grande como 999px hace una forma de píldora. También redondea el fondo, aunque no haya borde.

Q: ¿Cómo pongo un borde en un solo lado?

Usa una propiedad de lado: border-bottom: 2px solid #e5e7eb;, o border-inline-start para el lado donde empieza el texto, que también funciona en idiomas de derecha a izquierda.

La abreviatura border

border dibuja una línea alrededor de un elemento, entre su padding y su margin. La abreviatura acepta tres partes en cualquier orden: un grosor, un estilo y un color.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Parte	Propiedad larga	Valores	Por defecto
Grosor	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Estilo	`border-style`	`solid`, `dashed`, `dotted`, `double` y más	`none`
Color	`border-color`	Cualquier color	`currentColor` (el color del texto)

El estilo es la parte que no puedes omitir. Su valor por defecto es none, así que border: 2px #2563eb; no dibuja nada. Si omites el color, el borde toma el color del texto del elemento.

Estilos de borde

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double necesita al menos 3px para mostrar dos líneas. groove, ridge, inset y outset sombrean el color para que parezca 3D y varían un poco entre navegadores. hidden se ve como none; solo se diferencian dentro de tablas con bordes colapsados, que se explican en la página de bordes de tablas HTML.

Un lado a la vez

Cada lado tiene su propia abreviatura (border-top, border-right, border-bottom, border-left), y cada parte tiene propiedades largas por lado como border-top-color. Las versiones lógicas, border-inline-start y border-block-end, siguen la dirección del texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width y border-style aceptan de uno a cuatro valores en el mismo orden de las agujas del reloj que padding: arriba, derecha, abajo, izquierda.

Esquinas redondeadas con border-radius

border-radius redondea las esquinas del borde y del fondo, así que funciona en elementos sin ningún borde.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Valor	Resultado
`border-radius: 8px`	Todas las esquinas redondeadas 8px
`border-radius: 50%`	Un círculo en un elemento cuadrado, una elipse en un rectángulo
`border-radius: 999px`	Una píldora: los lados cortos se vuelven semicírculos completos
`border-radius: 8px 0`	Arriba a la izquierda y abajo a la derecha 8px, las otras dos rectas
`border-top-left-radius: 12px`	Una sola esquina
`border-radius: 50% / 25%`	Esquinas elípticas: radio horizontal / radio vertical

Un hijo con fondo puede sobresalir por las esquinas de un padre redondeado. overflow: hidden en el padre lo recorta según la curva.

Border vs outline

Un outline se parece a un borde, pero se dibuja por fuera y no ocupa espacio, así que agregarlo nunca mueve nada. Por eso los navegadores usan outlines para los anillos de foco.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Ocupa espacio	Sí, forma parte del tamaño de la caja	No
Por lado	Sí (`border-top`, ...)	No, todo alrededor
Sigue `border-radius`	Sí	Sí, en los navegadores actuales
Separación de la caja	No	Sí, `outline-offset`
Uso típico	Diseño	Indicadores de foco, depuración

Errores comunes

Sin estilo de borde. border: 1px #111827; y border-color: red; no dibujan nada. Incluye solid (u otro estilo).
Un borde que hace saltar el layout en hover. Reserva el espacio con un borde transparente, o usa un outline o box-shadow.
Olvidar el borde en el ancho. Un elemento con width: 100% y borde se sale de su contenedor con content-box. Usa box-sizing: border-box.
border-radius con un hijo que sobresale por las esquinas. Agrega overflow: hidden al padre redondeado.
Quitar los outlines de foco con outline: none. Los usuarios de teclado los necesitan; cambia el estilo del outline en lugar de eliminarlo.

Preguntas frecuentes

¿Cómo agrego un borde en CSS?

Usa la abreviatura con un grosor, un estilo y un color: border: 2px solid #2563eb;. El estilo es la parte más importante: sin él, border-style vale none y no se dibuja ningún borde.

¿Por qué no se ve mi borde en CSS?

Casi siempre porque no hay un estilo de borde. border: 2px #2563eb; o border-color: red; por sí solos no dibujan nada, porque el border-style por defecto es none. Agrega solid, dashed u otro estilo.

¿Cómo hago esquinas redondeadas en CSS?

Usa border-radius: border-radius: 8px; redondea las cuatro esquinas. border-radius: 50%; en un cuadrado hace un círculo, y un valor grande como 999px hace una forma de píldora. También redondea el fondo, aunque no haya borde.

¿Cómo pongo un borde en un solo lado?

Usa una propiedad de lado: border-bottom: 2px solid #e5e7eb;, o border-inline-start para el lado donde empieza el texto, que también funciona en idiomas de derecha a izquierda.

¿Qué diferencia hay entre border y outline?

Un borde es parte de la caja: ocupa espacio y cambia el tamaño del elemento. Un outline se dibuja fuera del borde sin ocupar espacio, no se puede definir por lado y es lo que usan los navegadores para los anillos de foco. Los dos siguen border-radius en los navegadores actuales.

Conceptos relacionados