Bordes y sombras
Bordes (Borders)
El sistema de bordes funciona por adición (poner bordes) o por sustracción (quitarlos).
Poner y Quitar Bordes
Para que aparezca un borde básico (gris fino de 1px), usas la clase border.
- Borde completo: border (Añade borde a los 4 lados).
- Por lados específicos: border-top (sólo arriba), border-bottom (sólo abajo), border-start (Izquierda), border-end (Derecha),
- Quitar bordes: Si un elemento ya tiene borde y quieres quitárselo (muy útil en tablas o listas), usas el 0. Ejemplo: border-0 (sin bordes), border-top-0 (sin borde arriba)
Colores del Borde
Funcionan igual que los colores de texto, pero con el prefijo border-.
- border-primary (Azul).
- border-danger (Rojo).
- border-white (Blanco).
- border-light (Gris muy claro, sutil).
Ojo: Para que se vea el color, el elemento debe tener primero la clase border. Ejemplo: <div class="border border-danger">...</div>
Grosor (Ancho)
Desde Bootstrap 5, puedes controlar el grosor del 1 al 5.
- border-1 (Por defecto, fino).
- border-2, border-3, border-4, border-5 (El más grueso).
Redondeado (Border Radius)
Esto controla las esquinas. Bootstrap lo llama Rounded.
- Redondeado estándar: rounded (Aplica un radio suave, ~4px).
- Sin redondear: rounded-0 (Esquinas rectas, útil para "des-redondear" botones o inputs).
- Tamaños: rounded-1 (Mínimo), rounded-2 (Medio), rounded-3 (Grande).
- Formas especiales: rounded-circle: Convierte un cuadrado en un "círculo perfecto" (ideal para avatares de usuario). rounded-pill: Bordes extremadamente redondos, como una pastilla (ideal para botones o etiquetas "tags").
Sombras (Shadows)
Las sombras sirven para dar profundidad (eje Z). Hacen que un elemento parezca estar flotando sobre el fondo. Tenemos 4 opciones principales:
- shadow-none: Elimina cualquier sombra (útil si un componente ya trae sombra y quieres quitársela).
- shadow-sm: Sombra pequeña. Ideal para elementos interactivos sutiles o tarjetas secundarias.
- shadow: Sombra regular. Es el estándar para destacar tarjetas, menús desplegables o modales.
- shadow-lg: Sombra larga/grande. Hace que el elemento parezca estar muy elevado. Ideal para elementos que flotan sobre todo lo demás (como un botón flotante o un aviso importante).