Border radius y formas

Diseña esquinas redondeadas, círculos y formas orgánicas con border-radius y copia el CSS.

Se procesa en tu navegador · Compruébalo Sin envíosDatos enviados: 0 · A otros dominios: 0Analítica: no existe · Anuncios: no existe

Prueba un ejemplo

Mover todas las esquinas a la vez

Esquinas

Arriba izquierda · Horizontal: 30%Arriba izquierda · Vertical: 30%

Arriba derecha · Horizontal: 70%Arriba derecha · Vertical: 30%

Abajo derecha · Horizontal: 70%Abajo derecha · Vertical: 70%

Abajo izquierda · Horizontal: 30%Abajo izquierda · Vertical: 70%

CSS

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Tailwind

rounded-[30%_70%_70%_30%/30%_30%_70%_70%]

Importar un border-radius existente (en %)Pega el valor o la declaración completa.

Aprende

¿Qué es?

border-radius redondea las esquinas de una caja. Con un solo valor todas las esquinas son iguales: 12% da esquinas suaves y 50% en una caja cuadrada da un círculo. Con más valores cada esquina puede ser distinta, y con la barra / puedes hacerlas ovaladas.

¿Para qué sirve?

Tarjetas, botones y avatares con las esquinas del estilo de tu diseño.
Círculos y píldoras sin imágenes.
Fondos decorativos con formas orgánicas (manchas, gotas, hojas) para dar personalidad.
Copiar el valor exacto, ya sea como CSS o como clase de Tailwind.

¿Cómo funciona por dentro?

Cada esquina es un cuarto de elipse con un radio horizontal y otro vertical. border-radius: A B C D / E F G H da los cuatro radios horizontales (arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda) y, tras la barra, los cuatro verticales. Si das menos de cuatro valores, CSS los repite: uno para todas, dos para pares opuestos, tres: arriba, los lados y abajo Las curvas de dos esquinas vecinas no pueden pasar del tamaño del lado; si se solaparían, el navegador las reduce todas a la vez. Por eso en las manchas aleatorias los pares opuestos suman 100 %.

Errores comunes

Usar px para una forma que debe adaptarse: un border-radius: 20px no se adapta al tamaño de la caja; los porcentajes sí.
Esperar un círculo en una caja que no es cuadrada: 50% da una elipse si el ancho y el alto son distintos.
Radios que suman más de 100 %: el navegador los reduce y la forma sale distinta de la esperada.
Olvidar overflow: hidden: el contenido de dentro (una imagen) no se recorta a las esquinas redondeadas sin él.
Confundir el orden: empieza arriba a la izquierda y sigue en el sentido de las agujas del reloj.

Glosario

Radio:: El tamaño de la curva de una esquina; 0 es una esquina recta.
Radio horizontal y vertical:: Cada esquina es un cuarto de elipse con dos radios; si son distintos
Barra "/":: En border-radius separa los radios horizontales (antes) de los verticales (después).
Forma orgánica:: Una figura con curvas irregulares

Para saber más

Más en Diseño web

Aprende paso a paso en la rutaCSS visual para tu web