Las sombras y los bordes redondeados son dos recursos de CSS que transforman contenedores planos en tarjetas atractivas y elementos con profundidad. Aquí aprendes a aplicar box-shadow, text-shadow y border-radius para darle un acabado visual profesional a tus proyectos web, con ejemplos prácticos sobre div y etiquetas de párrafo.

¿Cómo preparar los estilos base de un contenedor en CSS?

Antes de aplicar sombras o bordes redondeados, conviene definir una base limpia para los elementos. En la clase se trabaja con div y p, y se les aplican propiedades pensadas para que convivan bien en pantalla.

• display: inline-block para que los elementos se coloquen uno al lado del otro si hay espacio.
• padding: 20px y margin: 10px para separar contenido y contenedores.
• background: white como buena práctica, así evitas fondos transparentes cuando agregues color después.
• min-width: 100px para que el contenedor no se reduzca más allá de ese límite.
• text-align: center para centrar el texto dentro del bloque.

Con esa base lista, ya puedes empezar a estilizar con sombras y bordes [02:00].

¿Cómo funciona la propiedad box-shadow en CSS?

La propiedad box-shadow agrega una sombra al contenedor y se construye con varios valores escritos en una sola línea, sin comas entre ellos. Ese detalle es clave: a diferencia de los gradientes, aquí las comas rompen la declaración [04:30].

¿Qué valores acepta box-shadow? Acepta cinco: desplazamiento horizontal, desplazamiento vertical, blur (difuminado), spread (expansión) y color. Solo los dos primeros y el color son obligatorios.

Un ejemplo simple sería:

css .shadow-simple { box-shadow: 5px 5px gray; }

Eso genera una sombra desplazada 5 píxeles a la derecha y 5 hacia abajo, con un gris tenue. Si quieres una versión más realista, agrega blur y spread:

css .shadow-simple { box-shadow: 3px 3px 5px 1px gray; }

¿Cómo ajustar sombras desde el inspector del navegador?

Un truco útil: el inspector del navegador incluye un widget visual sobre box-shadow. Le das clic y puedes mover los valores de desplazamiento, blur y spread en tiempo real. Cuando encuentras el resultado que te gusta, copias la línea y la pegas en tu CSS [05:30].

Cuidado con exagerar el spread porque la sombra se expande demasiado y termina viéndose mal. El blur, en cambio, hace que la sombra se diluya y luzca más natural.

¿Cómo agregar una sombra interna con inset?

La palabra clave inset convierte la sombra externa en una sombra interna, ideal para crear efectos de profundidad hacia adentro del contenedor.

css .shadow-inset { box-shadow: inset 5px 5px 10px gray; }

El orden es el mismo que en una sombra normal, solo que inset va al inicio. Esto es útil para campos de formulario, paneles hundidos o tarjetas con un acabado distinto al clásico.

¿Qué es text-shadow y cómo se aplica al texto?

Cuando la sombra no es para una caja sino para letras, usas text-shadow. Funciona casi igual que box-shadow, pero sin spread ni inset.

¿Cuál es la diferencia entre box-shadow y text-shadow? box-shadow aplica sombra al contenedor completo. text-shadow solo afecta al texto y acepta desplazamiento horizontal, vertical, blur y color.

Un ejemplo concreto:

css h1 { text-shadow: 2px 2px 5px gray; }

Eso da 2 píxeles de desplazamiento a la derecha, 2 hacia abajo, 5 píxeles de blur y un color gris. Funciona muy bien en encabezados o títulos donde quieres reforzar la jerarquía visual sin recurrir a más peso tipográfico [09:00].

¿Cómo redondear bordes con border-radius?

Los bordes cuadrados funcionan, pero los bordes redondeados se sienten más modernos, sobre todo cuando estás armando tarjetas. La propiedad border-radius controla qué tan curvas son las esquinas.

Primero defines el borde y luego lo redondeas:

css .radius-small { border: 2px solid #333; border-radius: 5px; }

Con 5 píxeles las esquinas se suavizan apenas. Si combinas esto con una sombra tenue, las tarjetas empiezan a ganar presencia visual sin que el borde se vea pesado.

¿Cómo crear un contenedor circular con border-radius?

Para lograr un círculo, cambias los píxeles por porcentaje y das dimensiones iguales al contenedor.

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

¿Por qué mi border-radius del 50% no se ve circular? Porque el contenedor no tiene width y height iguales. Sin dimensiones definidas, el porcentaje no genera un círculo perfecto.

Este patrón es el que se usa para avatares, fotos de perfil o íconos circulares dentro de una interfaz [11:30].

A partir de aquí ya tienes el kit visual básico: una base limpia, sombras externas e internas, sombras en texto y bordes redondeados que van desde tarjetas suaves hasta círculos completos. ¿Con cuál de estos efectos vas a experimentar primero en tu proyecto? Cuéntame en los comentarios.