Bordes en CSS: border, color, ancho y radius (2026)

Los bordes en CSS son de lo primero que se aprende y de lo que más se usa: enmarcar una caja, separar secciones o redondear un botón. Con la propiedad border controlas el ancho, el estilo y el color, y con border-radius los redondeas. Te lo explico todo con código listo para copiar.

La forma rápida: la propiedad border

La manera más común es el atajo border, que junta las tres propiedades en una línea: ancho, estilo y color, en ese orden.

.caja {
  border: 2px solid #333;
}

El estilo es obligatorio: si no lo pones, el borde no se ve aunque definas ancho y color.

Ancho del borde (border-width)

Controla el grosor. Acepta píxeles o las palabras clave thin, medium y thick.

.caja {
  border-width: 4px;
  border-style: solid;
  border-color: #1a56db;
}

Tipos de borde (border-style)

El estilo cambia por completo el aspecto. Estos son los valores disponibles:

.caja {
  border: 3px dashed #d64545;
}

Color del borde (border-color)

Acepta cualquier formato de color: nombre, HEX, RGB o HSL. Si no defines color, hereda el del texto (currentColor).

.caja {
  border: 2px solid;
  border-color: rgb(26, 86, 219);
}

Borde en un solo lado

Puedes aplicar el borde solo a un lado con border-top, border-right, border-bottom o border-left. Muy útil para subrayar títulos o separar filas.

.titulo {
  border-bottom: 3px solid #1a56db;
}

Bordes redondeados (border-radius)

Para hacer un div con bordes redondeados, usa border-radius. Cuanto mayor el valor, más redondeadas las esquinas.

.tarjeta {
  border: 1px solid #ddd;
  border-radius: 12px;
}

Con border-radius: 50% conviertes un cuadrado en un círculo perfecto (ideal para avatares).

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Redondear solo algunas esquinas

Puedes dar un radio distinto a cada esquina. El orden es: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda.

.boton {
  border-radius: 12px 12px 0 0; /* solo las de arriba */
}

Errores frecuentes con los bordes

• Olvidar el estilo: sin solid, dashed, etc., el borde no aparece.
• Que el borde descuadre la caja: usa box-sizing: border-box; para que el ancho no crezca.
• Confundir border con outline: el outline no ocupa espacio y no admite border-radius.

Más CSS en el blog

• Filtros CSS con ejemplos
• CSS Flexbox paso a paso
• Todos los artículos de CSS

Preguntas frecuentes

¿Cómo hago un div con bordes redondeados?

Con border-radius, por ejemplo border-radius: 12px;. Con 50% consigues un círculo.

¿Cómo pongo borde solo en un lado?

Con border-top, border-right, border-bottom o border-left, según el lado que quieras.

¿Cuáles son los tipos de border en CSS?

solid, dashed, dotted, double, groove, ridge, inset, outset y none.

Copia los ejemplos, cámbiales los valores y verás el resultado al instante. Los bordes son de lo más agradecido de CSS para dar forma a tu diseño.