Border-radius en CSS: bordes redondeados, sombras, degradados y generadores online

Para redondear las esquinas de un elemento con CSS se usa border-radius: con border-radius: 10px; las cuatro esquinas quedan redondeadas con un radio de 10 píxeles, y con border-radius: 50%; un cuadrado se convierte en un círculo. Funciona en todos los navegadores desde 2015, así que ya no hacen falta imágenes de esquinas ni los prefijos -webkit- y -moz- de hace años. Si no quieres calcular los valores a mano, hay generadores online que te dan el código listo para copiar, y algunos son de la propia documentación oficial.

Cómo funciona border-radius

border-radius es una propiedad abreviada que agrupa las cuatro esquinas. Como en margin, cuántos valores escribas decide a qué esquina va cada uno, empezando por la de arriba a la izquierda y siguiendo las agujas del reloj:

border-radius: 10px;              /* las cuatro esquinas */
border-radius: 10px 5%;           /* sup. izq. e inf. dcha. | sup. dcha. e inf. izq. */
border-radius: 2px 4px 2px;       /* sup. izq. | sup. dcha. e inf. izq. | inf. dcha. */
border-radius: 1px 0 3px 4px;     /* sup. izq. | sup. dcha. | inf. dcha. | inf. izq. */

Si pones dos radios separados por una barra, las esquinas dejan de ser circulares y pasan a ser elípticas. El primer grupo de valores es el radio horizontal y el segundo, el vertical:

border-radius: 10px / 20px;
border-radius: 50% 20% / 10% 40%;

Con porcentajes, el radio horizontal se calcula sobre el ancho de la caja y el vertical sobre el alto. Por eso 50% da un círculo en un cuadrado y una elipse en un rectángulo. También puedes redondear una sola esquina con su propiedad larga, por ejemplo border-top-left-radius.

Sobre los prefijos: en 2010 había que escribir -webkit-border-radius y -moz-border-radius junto a la versión estándar, porque los navegadores la tenían como función experimental. Hoy los navegadores ya no añaden prefijos a sus experimentos, y border-radius, box-shadow y los degradados lineales y radiales funcionan sin ellos en todos desde 2015. Si un generador te los sigue dando, puedes borrarlos.

Sombras con box-shadow

box-shadow añade una sombra alrededor de la caja. Se describe con el desplazamiento horizontal y vertical, el desenfoque, la expansión y el color, en ese orden:

box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2);
box-shadow: inset 5em 1em gold;
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Los dos primeros valores son obligatorios. El tercero es el desenfoque y el cuarto la expansión, que agranda o encoge la sombra respecto al elemento. La palabra inset pone la sombra por dentro, como si el contenido estuviera hundido, y separando varias sombras con comas se combinan. Para que una sombra parezca natural, yo usaría varias sombras suaves superpuestas con poca opacidad antes que una sola oscura.

Degradados con CSS

Los degradados en CSS no son un color, son una imagen, así que van en background o background-image. Hay tres funciones:

background: linear-gradient(90deg, #2a7b9b, #57c785 50%, #eddd53);
background: radial-gradient(circle, #ffffff, #1766aa);
background: conic-gradient(red, yellow, green, blue, red);

linear-gradient() pasa de un color a otro en línea recta, en la dirección que marques con grados o con palabras como to right. radial-gradient() sale de un punto hacia fuera, en círculo o en elipse. conic-gradient() gira alrededor de un centro, y sirve para gráficos de sectores o ruedas de color. El porcentaje junto a un color indica en qué punto del recorrido se sitúa. Si te cuesta dar con colores que combinen, mira la guía para crear una paleta de colores a partir de una imagen.

Generadores CSS online

Los generadores te ahorran el ensayo y error: mueves unos controles, ves el resultado y copias el código. Estos son los que recomendaría hoy.

La documentación de MDN tiene sus propios generadores, en los que construyes el efecto y obtienes su CSS: el generador de border-radius y el generador de box-shadow, con el que puedes añadir una o varias sombras a la vez.

Para sombras sobre tu propia página, lo más cómodo no está en ninguna web: es el editor de sombras de las herramientas para desarrolladores de Chrome. Seleccionas el elemento, pulsas el icono que aparece junto a la declaración box-shadow o text-shadow en la pestaña Styles, y ajustas desplazamiento, desenfoque, expansión y tipo (exterior o inset) viendo el cambio en directo. Luego copias el valor a tu CSS.

Para degradados, con CSS Gradient creas degradados lineales y radiales con varios colores, eliges cada parada y copias el código. Y si buscas formas orgánicas, esas manchas redondeadas que se ven en muchas webs, Fancy Border Radius genera el border-radius de ocho valores con barra que las produce, y te deja ajustarlo viendo la forma.

Qué fue de los generadores de 2010

Border-radius.com, el que recomendé en 2010, sigue en pie, pero sigue mostrando las variantes WebKit y Gecko de entonces. Te vale para entender las cuatro esquinas, aunque los prefijos sobran. CSS3 Maker, el generador que agrupaba border-radius, degradados, transformaciones, animaciones, sombras de texto y de caja y @font-face, hoy redirige a una página de Toptal. Y la aplicación Generator Box Shadow que enlacé en 2011 ya no responde.

Si quieres repasar desde el principio cómo se escriben los selectores, el modelo de caja o flexbox, tienes la guía para aprender CSS con recursos gratis y una chuleta básica.

Revisado y actualizado en octubre de 2026.