Bordes y Sombras

Los bordes y sombras son detalles que hacen que tu diseño brille. Un borde bien hecho o una sombra sutil pueden transformar un elemento aburrido en algo profesional y atractivo.

1. Bordes Básicos

Un borde es una línea alrededor de un elemento. Tiene tres propiedades: grosor, estilo y color.

/* Forma corta: grosor, estilo, color */
div {
  border: 2px solid black;
}

/* Forma larga */
div {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

2. Estilos de Borde

CSS ofrece varios estilos de borde. Aquí están los más comunes:

div {
  border: 2px solid #333;
}

div {
  border: 2px dashed #FF6B6B;
}

div {
  border: 2px dotted #FFD700;
}

div {
  border: 4px double #00BFFF;
}

div {
  border: 4px groove #888;
}

div {
  border: 4px ridge #888;
}

3. Bordes Individuales

Puedes aplicar bordes diferentes a cada lado del elemento.

/* Borde en cada lado */
div {
  border-top: 2px solid red;
  border-right: 2px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 2px double yellow;
}

/* Borde solo en la parte inferior */
h2 {
  border-bottom: 3px solid #FF6B6B;
  padding-bottom: 10px;
}

4. Border Radius (Esquinas Redondeadas)

Redondea las esquinas de un elemento para un look más moderno.

/* Todas las esquinas iguales */
div {
  border-radius: 10px;
}

/* Esquinas diferentes */
div {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 20px;
}

/* Forma corta: arriba-izq, arriba-der, abajo-der, abajo-izq */
div {
  border-radius: 10px 20px 10px 20px;
}

/* Crear un círculo */
div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

5. Sombras de Caja (Box Shadow)

Las sombras añaden profundidad y dimensión a tus elementos.

/* Sombra simple */
div {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Sintaxis: desplazamiento-x, desplazamiento-y, difuminado, expansión, color */
div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  /* 5px derecha, 5px abajo, 10px de difuminado, color semi-transparente */
}

/* Múltiples sombras */
div {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Sombra interna */
div {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

6. Sombras de Texto (Text Shadow)

Añade sombras al texto para hacerlo más legible o decorativo.

/* Sombra de texto simple */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Sombra de texto con efecto de profundidad */
h1 {
  text-shadow: 3px 3px 0px #FF6B6B;
}

/* Múltiples sombras para efecto artístico */
h1 {
  text-shadow: 2px 2px 4px red, 4px 4px 8px blue, 6px 6px 12px green;
}

/* Sombra para mejorar legibilidad */
p {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

7. Casos de Uso Comunes

Aquí hay patrones que usarás frecuentemente:

.card {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

button {
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

h2 {
  border-bottom: 3px solid #FF6B6B;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 2.5em;
}

8. Outline (Contorno)

Similar a border, pero dibuja FUERA del elemento y no afecta el flujo.

/* Outline en elementos enfocados */
input:focus {
  outline: 2px solid #00BFFF;
  outline-offset: 2px; /* Distancia del outline al elemento */
}

/* Remover outline por defecto */
button {
  outline: none;
}