Bordes CSS
Ya sabes rellenos, fotos, degradados y fundidos suaves. Siguiente habilidad: dibujar el borde de la caja. Un borde (border) es la línea que enmarca el elemento — tarjetas, botones, campos y paneles lo usan a diario.
¿Qué es un borde?
Un borde CSS se sitúa en el borde de la caja del elemento. Tiene tres ingredientes: ancho (grosor), estilo (aspecto — sólido, discontinuo, etc.) y color. Sin estilo, a menudo no verás una línea útil aunque pongas ancho.
Las tres partes
Piensa cada borde como una receta corta: grosor + aspecto + pintura.
Largo: ancho, estilo y color
css.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}Por qué importa el estilo
border-width solo no basta. Sin un border-style distinto del inicial none, normalmente no verás línea. Empieza con solid hasta necesitar algo más.
Atajo: una línea en lugar de tres
El atajo border junta ancho, estilo y color. Orden cotidiano habitual: ancho → estilo → color.
Atajo border
css.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}Estilos de borde comunes
El estilo es la personalidad de la línea. Memoriza primero un set diario pequeño.
📊 Valores comunes de border-style
| Palabra | Aspecto | Uso diario |
|---|---|---|
solid |
Línea continua | Tarjetas, botones, campos |
dashed |
Guiones cortos | Marcadores, zonas de soltar |
dotted |
Puntos | Separadores suaves, marcos discretos |
double |
Dos líneas paralelas | Énfasis decorativo (con moderación) |
none |
No se dibuja borde | Reinicio / quitar el borde |
hidden |
Como none al colapsar bordes de tabla | Tablas después — conoce el nombre |
Varios estilos lado a lado
Mismo ancho y color; solo cambia el estilo.
solid, dashed, dotted, double
css.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }Un lado a la vez
Puedes estilar arriba, derecha, abajo e izquierda por separado — útil para subrayados, barra de acento izquierda o tarjetas asimétricas.
Bordes por lado
css.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}Atajo por lado
border-left: 4px solid #0f766e es la forma cotidiana de fijar un borde sin tocar los demás.
Hábito de tarjeta cotidiana
Un borde fino con relleno interno y fondo suave se lee como tarjeta clara sin gritar.
Tarjeta con borde simple
css.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* el redondeo es la siguiente lección — aquí esquinas rectas */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}Quitar un borde
Para limpiar, prefiere border: none (o border-style: none). Solo border-color: transparent a veces deja grosor/espacio — none es el reinicio limpio.
Reinicio con border none
css.plain {
border: none;
}Pruébalo tú
- Tarjeta con
border-width,border-style: solidyborder-colorverde azulado. - Reescribe el mismo look con
border: 2px solid #0f766e. - Cuatro cajas: solid, dashed, dotted y double con el mismo grosor.
- Cita solo con borde izquierdo grueso.
- Parte de un botón con borde y quita el borde con
border: none.
Errores comunes
- Poner ancho y color y olvidar
border-style(no se ve nada) - Confundir border (borde dibujado) con margin (hueco exterior) — herramientas distintas
- Esperar esquinas redondas solo de
border— eso esborder-radius(siguiente lección) - Colorear cada lado de forma chillona «porque sí»
- Dejar un borde grueso transparente cuando querías
border: none
Resumen
- Un borde necesita ancho, estilo y color
border: 2px solid #0f766ees el atajo cotidiano- Aprende primero
solid,dashed,dotted,doubleynone - Estila lados por separado cuando el diseño lo pida
- Reinicia limpio con
border: none - Esquinas rectas por ahora — el redondeo viene después
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior