Bordes y sombras

Bordes básicos y colores

Los bordes en Bootstrap funcionan como herramientas fundamentales para definir límites visuales entre elementos y crear separación de contenido. El sistema de utilidades de bordes está diseñado para aplicarse de forma rápida y consistente a cualquier elemento HTML, manteniendo la coherencia visual en toda la interfaz.

Aplicación de bordes básicos

Bootstrap proporciona la clase .border como base para agregar bordes a elementos. Esta clase aplica un borde de 1px en color gris claro alrededor de todo el elemento:

<div class="border p-3">
  Elemento con borde básico
</div>

Para mayor control, puedes aplicar bordes direccionales utilizando las siguientes clases:

• .border-top - Borde superior únicamente
• .border-end - Borde derecho únicamente
• .border-bottom - Borde inferior únicamente
• .border-start - Borde izquierdo únicamente

<div class="border-bottom p-3 mb-2">
  Solo borde inferior
</div>
<div class="border-start border-end p-3">
  Bordes laterales
</div>

Eliminación de bordes

En ocasiones necesitarás remover bordes específicos de elementos que ya los tienen. Bootstrap ofrece clases para eliminar bordes:

<div class="border border-0 p-3">
  Sin bordes (removidos todos)
</div>
<div class="border border-top-0 p-3">
  Sin borde superior
</div>

Las clases de eliminación siguen el mismo patrón direccional: .border-0, .border-top-0, .border-end-0, .border-bottom-0, .border-start-0.

Sistema de colores para bordes

Bootstrap integra su paleta de colores semánticos con las utilidades de bordes, permitiendo aplicar colores que transmiten significado y mantienen consistencia visual:

<div class="border border-primary p-3 mb-2">
  Borde primario (azul)
</div>
<div class="border border-success p-3 mb-2">
  Borde de éxito (verde)
</div>
<div class="border border-danger p-3 mb-2">
  Borde de peligro (rojo)
</div>
<div class="border border-warning p-3 mb-2">
  Borde de advertencia (amarillo)
</div>
<div class="border border-info p-3 mb-2">
  Borde informativo (cyan)
</div>

Colores neutros y adicionales

Además de los colores semánticos, Bootstrap proporciona opciones neutras que funcionan bien en diferentes contextos:

<div class="border border-secondary p-3 mb-2">
  Borde secundario (gris)
</div>
<div class="border border-dark p-3 mb-2">
  Borde oscuro (negro)
</div>
<div class="border border-light p-3 mb-2">
  Borde claro (gris muy claro)
</div>

Combinación práctica con contenido

Los bordes cobran mayor utilidad cuando se combinan con contenido real y otros elementos de Bootstrap:

<div class="border border-info p-4 mb-3">
  <h5 class="text-info mb-2">Información importante</h5>
  <p class="mb-0">Este contenedor utiliza un borde informativo que complementa el color del título.</p>
</div>

<div class="border-start border-success border-4 ps-3">
  <p class="mb-0">Destacado con borde izquierdo grueso en color de éxito.</p>
</div>

El grosor del borde se puede ajustar usando números del 1 al 5: .border-1, .border-2, .border-3, .border-4, .border-5. Por defecto, la clase .border equivale a .border-1.

Contexto semántico de los colores

Los colores de borde en Bootstrap están diseñados para comunicar estados y tipos de contenido específicos:

• Primary: Elementos principales o llamadas a la acción
• Success: Confirmaciones, elementos completados o positivos
• Danger: Errores, advertencias críticas o elementos destructivos
• Warning: Precauciones, elementos que requieren atención
• Info: Información adicional, ayudas contextuales
• Secondary: Elementos secundarios, contenido de apoyo
• Dark/Light: Contraste general, elementos neutros

Esta consistencia semántica facilita que los usuarios comprendan intuitivamente el propósito y la importancia de diferentes secciones de contenido basándose únicamente en los colores visuales aplicados.

Utilidades de bordes y radius

Las utilidades de radius en Bootstrap permiten crear esquinas redondeadas que suavizan la apariencia de los elementos y mejoran la estética visual. Estas clases trabajan en conjunto con las utilidades de bordes para crear elementos más atractivos y modernos.

Radius básico

La clase .rounded aplica un border-radius estándar a todas las esquinas del elemento, creando un efecto de esquinas suavemente redondeadas:

<div class="border border-primary rounded p-3 mb-3">
  Elemento con esquinas redondeadas básicas
</div>

Control direccional del radius

Bootstrap ofrece control granular sobre qué esquinas específicas reciben el efecto redondeado:

Esquinas por lados:

<div class="border rounded-top p-3 mb-2">
  Solo esquinas superiores redondeadas
</div>
<div class="border rounded-end p-3 mb-2">
  Solo esquinas derechas redondeadas
</div>
<div class="border rounded-bottom p-3 mb-2">
  Solo esquinas inferiores redondeadas
</div>
<div class="border rounded-start p-3 mb-2">
  Solo esquinas izquierdas redondeadas
</div>

Esquinas individuales:

<div class="border rounded-top-start p-3 mb-2">
  Solo esquina superior izquierda
</div>
<div class="border rounded-top-end p-3 mb-2">
  Solo esquina superior derecha
</div>
<div class="border rounded-bottom-start p-3 mb-2">
  Solo esquina inferior izquierda
</div>
<div class="border rounded-bottom-end p-3 mb-2">
  Solo esquina inferior derecha
</div>

Variaciones de tamaño del radius

El tamaño del radio se puede ajustar utilizando números del 0 al 5, ofreciendo desde esquinas completamente rectas hasta muy redondeadas:

<div class="border rounded-0 p-3 mb-2">
  Sin redondeo (esquinas rectas)
</div>
<div class="border rounded-1 p-3 mb-2">
  Redondeo mínimo
</div>
<div class="border rounded-2 p-3 mb-2">
  Redondeo pequeño
</div>
<div class="border rounded-3 p-3 mb-2">
  Redondeo medio (equivale a .rounded)
</div>
<div class="border rounded-4 p-3 mb-2">
  Redondeo grande
</div>
<div class="border rounded-5 p-3 mb-2">
  Redondeo máximo
</div>

Formas especiales

Bootstrap incluye clases especializadas para crear formas geométricas específicas muy utilizadas en interfaces modernas:

Elementos circulares:

<div class="border border-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px;">
  Círculo
</div>

Elementos tipo píldora:

<div class="border border-info rounded-pill px-4 py-2 d-inline-block">
  Elemento píldora
</div>

Combinaciones prácticas con diferentes elementos

Las utilidades de radius se integran perfectamente con diversos componentes y utilidades de Bootstrap:

Cards con esquinas personalizadas:

<div class="card border-success rounded-4" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card redondeada</h5>
    <p class="card-text">Esta card utiliza un radius más pronunciado que el estándar.</p>
  </div>
</div>

Botones con formas especiales:

<button type="button" class="btn btn-primary rounded-pill me-2">
  Botón píldora
</button>
<button type="button" class="btn btn-outline-secondary rounded-0">
  Botón rectangular
</button>

Elementos destacados con bordes y radius:

<div class="border border-warning border-3 rounded-4 p-4 mb-3">
  <div class="border-start border-warning border-4 rounded-start-3 ps-3">
    <h6 class="text-warning mb-2">Advertencia importante</h6>
    <p class="mb-0">Combinación de borde grueso con radius para crear jerarquía visual.</p>
  </div>
</div>

Aplicación responsive del radius

Las utilidades de radius también soportan breakpoints responsive, permitiendo diferentes niveles de redondeo según el tamaño de pantalla:

<div class="border rounded-2 rounded-md-4 rounded-lg-pill p-3">
  <p class="mb-0">
    Radio que cambia según el breakpoint: pequeño en móvil, 
    medio en tablet, píldora en desktop.
  </p>
</div>

Eliminación selectiva de radius

Al igual que con los bordes, puedes remover el radius de elementos que ya lo tienen aplicado:

<div class="rounded rounded-bottom-0 border p-3">
  Radio removido solo en la parte inferior
</div>

Las utilidades de radius transforman elementos rectangulares básicos en componentes visualmente atractivos que se integran mejor en diseños modernos, especialmente cuando se combinan estratégicamente con bordes de colores y diferentes grosores para crear jerarquías visuales claras y efectivas.

Sombras y efectos visuales

Las sombras en Bootstrap proporcionan profundidad visual y ayudan a establecer jerarquías claras entre elementos, creando la sensación de que algunos componentes "flotan" sobre otros. El sistema de sombras utiliza la propiedad CSS box-shadow de forma optimizada y consistente.

Sistema básico de sombras

Bootstrap ofrece cinco niveles de intensidad de sombra que van desde sutil hasta muy pronunciada, permitiendo crear diferentes grados de elevación visual:

<div class="shadow-none border p-3 mb-3">
  Sin sombra (elimina sombras existentes)
</div>
<div class="shadow-sm p-3 mb-3">
  Sombra pequeña y sutil
</div>
<div class="shadow p-3 mb-3">
  Sombra estándar (nivel medio)
</div>
<div class="shadow-lg p-3 mb-3">
  Sombra grande y prominente
</div>

Creación de profundidad visual

Las sombras son especialmente efectivas para separar contenido del fondo y crear sensación de capas superpuestas:

<div class="container-fluid bg-light p-4">
  <div class="row g-3">
    <div class="col-md-4">
      <div class="bg-white shadow-sm rounded p-4">
        <h6>Elemento elevado sutilmente</h6>
        <p class="mb-0">Contenido que parece ligeramente separado del fondo.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bg-white shadow rounded p-4">
        <h6>Elemento con elevación media</h6>
        <p class="mb-0">Mayor separación visual del fondo.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bg-white shadow-lg rounded p-4">
        <h6>Elemento muy elevado</h6>
        <p class="mb-0">Máxima separación, ideal para elementos importantes.</p>
      </div>
    </div>
  </div>
</div>

Combinación con bordes y radius

La combinación estratégica de sombras, bordes y radius crea efectos visuales sofisticados que mejoran significativamente la percepción de calidad del diseño:

<div class="border border-primary rounded-3 shadow-lg p-4 mb-4">
  <h5 class="text-primary mb-3">Tarjeta destacada</h5>
  <p class="mb-0">
    Combinación de borde coloreado, esquinas redondeadas y sombra 
    pronunciada para crear un elemento visualmente prominente.
  </p>
</div>

<div class="rounded-pill shadow p-3 d-inline-block bg-white">
  <span class="text-muted">Elemento píldora con sombra</span>
</div>

Efectos de hover y interacción

Las sombras pueden cambiar dinámicamente para proporcionar retroalimentación visual durante la interacción del usuario:

<style>
.hover-shadow {
  transition: box-shadow 0.3s ease;
}
.hover-shadow:hover {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
</style>

<div class="shadow-sm hover-shadow rounded p-4 mb-3 bg-white cursor-pointer">
  <h6>Efecto hover</h6>
  <p class="mb-0">La sombra se intensifica al pasar el cursor sobre este elemento.</p>
</div>

Aplicación en componentes comunes

Las sombras se integran perfectamente con los componentes que ya dominas, mejorando su apariencia y funcionalidad visual:

Cards con diferentes niveles de prominencia:

<div class="row g-3">
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Card estándar</h5>
        <p class="card-text">Sombra sutil para separación básica del fondo.</p>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card shadow-lg border-0">
      <div class="card-body">
        <h5 class="card-title">Card destacada</h5>
        <p class="card-text">Sombra pronunciada sin borde para máximo impacto visual.</p>
      </div>
    </div>
  </div>
</div>

Botones con efecto de elevación:

<button type="button" class="btn btn-primary shadow me-2">
  Botón con sombra
</button>
<button type="button" class="btn btn-outline-secondary shadow-sm">
  Botón con sombra sutil
</button>

Navegación y elementos flotantes

Las sombras son especialmente útiles para elementos que deben aparecer por encima de otros contenidos:

<nav class="navbar navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar con sombra</a>
  </div>
</nav>

<div class="position-relative">
  <p>Contenido base de la página...</p>
  <div class="position-absolute top-0 end-0 bg-white rounded shadow p-3">
    <small class="text-muted">Elemento flotante con sombra</small>
  </div>
</div>

Eliminación de sombras

En algunos contextos necesitarás remover sombras que otros elementos o componentes aplican por defecto:

<div class="card shadow-none border">
  <div class="card-body">
    <h5 class="card-title">Card sin sombra</h5>
    <p class="card-text">Útil cuando necesitas un estilo más plano o minimalista.</p>
  </div>
</div>

Jerarquía visual con sombras

Las sombras permiten crear niveles de importancia visual claros, guiando la atención del usuario hacia elementos específicos:

<div class="container">
  <!-- Elemento principal con mayor elevación -->
  <div class="shadow-lg rounded-3 p-4 mb-4 bg-white">
    <h4>Elemento principal</h4>
    <p>Máxima prominencia visual con sombra pronunciada.</p>
  </div>
  
  <!-- Elementos secundarios con elevación media -->
  <div class="row g-3">
    <div class="col-md-6">
      <div class="shadow rounded p-3 bg-white">
        <h6>Elemento secundario</h6>
        <p class="mb-0">Importancia media.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="shadow rounded p-3 bg-white">
        <h6>Elemento secundario</h6>
        <p class="mb-0">Importancia media.</p>
      </div>
    </div>
  </div>
  
  <!-- Elementos de apoyo con sombra mínima -->
  <div class="shadow-sm rounded p-2 mt-3 bg-light">
    <small class="text-muted">Información de apoyo con mínima elevación.</small>
  </div>
</div>

Las sombras transforman diseños planos en interfaces tridimensionales que comunican relaciones espaciales y de importancia, mejorando tanto la estética como la usabilidad al proporcionar señales visuales claras sobre la estructura y jerarquía del contenido.