Una esquina redondeada en CSS es un cuarto de elipse, y cada esquina tiene dos radios: uno horizontal y uno vertical. border-radius: 24px define los ocho de golpe, y por eso la propiedad parece un único control. Las formas largas permiten separarlos: hasta cuatro esquinas listadas en sentido horario desde la superior izquierda, y una barra que separa el conjunto horizontal del vertical. Ese es todo el modelo. Lo que queda son reglas de abreviatura y un comportamiento de reducción que confunde a todo el mundo al menos una vez.
Qué significan los cuatro valores
Las esquinas se listan en sentido horario empezando por la superior izquierda: superior izquierda, superior derecha, inferior derecha, inferior izquierda. La misma dirección que margin y padding, pero con otro punto de partida: esas empiezan por el lado superior, esta empieza por una esquina.
Las listas más cortas se reflejan en lugar de repetirse, y la forma de dos valores es la que hace tropezar a la gente:
- Un valor: las cuatro esquinas.
- Dos valores: el primero es la superior izquierda y la inferior derecha; el segundo, la superior derecha y la inferior izquierda. Son las diagonales. Si esperabas «el par de arriba, el par de abajo», vas a construir la forma equivocada y a quedarte mirándola un buen rato.
- Tres valores: la superior izquierda, luego la otra diagonal (superior derecha e inferior izquierda) juntas, y luego la inferior derecha.
- Cuatro valores: una para cada esquina, en sentido horario.
Cada esquina tiene además su propia forma larga: border-top-left-radius y sus tres hermanas. Úsalas cuando quieras cambiar una sola esquina sin volver a declarar las otras tres.
Qué hace la barra
La barra separa los radios horizontales de los verticales. border-radius: 60px / 20px da cuatro esquinas que llegan a 60 px hacia los lados y solo 20 px hacia arriba o hacia abajo: curvas anchas y poco profundas, la forma que obtienes en una píldora estirada. Todo lo que va antes de la barra es horizontal, todo lo que va después es vertical, y cada lado de la barra sigue las mismas reglas de reflejo de uno a cuatro valores que vimos arriba.
De ahí salen los ocho radios: cuatro esquinas por dos ejes. Escrito completo, border-radius: 40px 20px 60px 10px / 10px 60px 20px 40px es válido y completamente ilegible.
Nadie escribe esto a mano. Ese es el argumento honesto a favor de un generador de border-radius con vista previa en tiempo real: activas las esquinas elípticas, arrastras los ocho deslizadores y copias la línea. Colapsa cada conjunto de cuatro valores a la forma más corta que sigue significando lo mismo, así que el resultado queda más limpio que lo que habrías escrito tú. Tiene dos límites que conviene conocer antes. Los deslizadores se detienen en 100, así que el truco de la píldora con un valor enorme que aparece más abajo lo tienes que escribir tú. Y escribe solo la forma abreviada: nada de formas largas por esquina, ni propiedades lógicas como border-start-start-radius, que es lo que necesitas si tu layout se invierte para idiomas de derecha a izquierda.
Las formas largas por esquina también aceptan los dos radios, pero con un espacio en lugar de una barra: border-top-left-radius: 40px 20px significa 40 px horizontal y 20 px vertical. La barra solo existe en la forma abreviada, porque la abreviatura necesita una manera de distinguir dos grupos de cuatro.
¿px, rem o porcentaje?
Un radio en px se queda donde está. En rem escala con el tamaño de fuente raíz, así que una esquina de 0.25rem mide 4 px con la raíz por defecto de 16 px y 6 px para quien la haya subido a 24. Si eso es una mejora o no depende del radio: invisible a 4 px, claramente visible en una tarjeta de 24 px. La misma disyuntiva aparece al elegir entre px, rem y em en el resto de tu CSS.
Los porcentajes son el caso interesante, porque un mismo número se resuelve respecto de dos longitudes distintas. El radio horizontal se calcula sobre el ancho del elemento; el vertical, sobre su alto. En una caja de 400 por 100, border-radius: 20% produce un radio horizontal de 80 px y uno vertical de 20 px. No es una esquina redonda; es una esquina estirada, y cambia de forma cada vez que la caja cambia.
Por eso también 50% da un círculo perfecto en un cuadrado y una elipse en todo lo demás. Si quieres una píldora —un rectángulo totalmente redondeado cuya sección recta del medio siga siendo recta— los porcentajes son la herramienta equivocada. Usa un valor en píxeles absurdo y deja que la regla de reducción de abajo haga el trabajo.
Por qué una esquina salió más pequeña que el número que pusiste
Pon border-radius: 200px en una caja de 200 por 60 y no vas a obtener esquinas de 200 px. Vas a obtener esquinas de 30 px. El navegador no recorta cada radio por separado; los reescala todos juntos.
La regla, sacada de la especificación CSS Backgrounds and Borders: para cada lado de la caja, divide la longitud del lado entre la suma de los dos radios que lo tocan. Toma la menor de esas cuatro proporciones. Si es menor que 1, multiplica todos los radios del elemento por ese factor.
Dos consecuencias que vale la pena tener presentes. Primera, una esquina demasiado grande encoge en silencio a las otras tres, en proporción: subes el deslizador de la superior izquierda y la curva inferior derecha se aplana sola, sin que la toques. Segunda, un valor enorme nunca puede desbordarse ni romper nada: border-radius: 9999px en esa caja de 200 por 60 se reduce a exactamente 30 px en las cuatro esquinas, que es la mitad del lado corto, que es una píldora perfecta. Ese es todo el truco detrás del 9999px que ves en las hojas de estilo de otra gente. No es un número mágico, solo es lo bastante grande como para que la reducción siempre se active.
Puedes comprobarlo sin abrir las herramientas de desarrollo. Pon border-radius: 100px en una caja de 320 por 170 y las esquinas salen a 85 px —la mitad del alto— porque los dos radios apilados en cada lado corto querían 200 px y solo había 170 disponibles. Haz la caja de 201 px de alto y la misma declaración por fin te da los 100 px que pediste. Nada cambió en el CSS.
Redondear una caja no redondea lo que hay dentro
El radio recorta el fondo y el borde del propio elemento. No recorta a sus hijos. Mete una imagen cuadrada dentro de una tarjeta redondeada y las esquinas de la imagen asoman rectas: una razón habitual por la que la gente decide que border-radius no funciona.
Dos arreglos, ambos con un costo. Darle a la imagen el mismo radio, que va bien hasta que la tarjeta tiene padding y las curvas dejan de alinearse. O poner overflow: hidden en el padre, que recorta todo pero convierte la tarjeta en un contenedor de scroll: eso rompe position: sticky dentro de ella y puede cortar un menú desplegable pensado para escapar de la caja.
Algunas cosas siguen la curva gratis. Un box-shadow traza el contorno redondeado automáticamente en vez de dibujar un rectángulo detrás, y los navegadores actuales también curvan el outline del foco para que coincida.
El interior de una tarjeta no lleva el mismo radio que el exterior
Anida un elemento redondeado dentro de otro redondeado, dales el mismo radio y el resultado se ve ligeramente mal de una manera que casi nadie sabe nombrar. Las dos curvas no son concéntricas.
El arreglo es pura aritmética: radio interior = radio exterior − padding. Una tarjeta con 16 px de radio y 12 px de padding pide unos 4 px en el elemento de dentro. Si el padding es mayor que el radio, el elemento interior debería ir cuadrado.
Los navegadores ya hacen esto con los bordes. La curva interior, donde empieza la caja de padding, es el radio exterior menos el ancho del borde, con un mínimo de cero: así, un radio de 6 px con un borde de 8 px da una esquina interior en punta y una exterior redondeada. Simplemente no ocurre entre elementos separados, porque el navegador no tiene idea de que debían verse relacionados.
Lo que border-radius no puede hacer
No puede hacer un squircle. Los rectángulos redondeados de la pantalla de inicio de un iPhone son superelipses: la curvatura entra poco a poco, así que no hay un momento visible en el que el borde recto se convierte en curva. Una esquina de CSS es un arco elíptico, y un arco se encuentra con el borde recto con un cambio brusco de curvatura. Ninguna combinación de los ocho radios reproduce esa forma más suave. Para eso necesitas un clip-path con un path, una máscara SVG o la nueva propiedad corner-shape a medida que crece su soporte.
Tampoco hace nada en una tabla que usa border-collapse: collapse. La especificación excluye ese caso de plano, así que si necesitas esquinas redondeadas en una tabla, cambia a border-collapse: separate y redondea las celdas de las esquinas, o envuelve la tabla en un contenedor redondeado.
Y por sí solo significa muy poco. Dos tarjetas a 8 px y 12 px no se leen como niveles distintos de importancia. La profundidad viene de la elevación, y cómo box-shadow construye esa sensación de capas es la otra mitad de hacer que una tarjeta parezca una tarjeta.
Ocho radios son más de lo que nadie puede tener en la cabeza, así que la manera más rápida de dar con la forma que quieres es arrastrar los deslizadores del generador de border-radius y copiar la línea que escribe. Su botón de blob aleatorio también merece un clic: cambiar cada esquina a un porcentaje independiente es la forma más rápida de sentir hasta dónde pueden deformar un rectángulo los ocho valores.
Las esquinas redondeadas son la mitad de lo que hace que un elemento se lea como una superficie elevada. La otra mitad es la sombra, y equivocarse con esa se nota más: cómo funciona realmente box-shadow en CSS cubre el spread, el blur y por qué una sola sombra dura siempre se ve barata.
Preguntas frecuentes
¿Cómo funciona border-radius en CSS?
Cada esquina se dibuja como un cuarto de elipse con un radio horizontal y un radio vertical. Un solo valor define los ocho radios, así que cada esquina queda como un cuarto de círculo. Al listar más valores, estos se asignan a esquinas específicas, en sentido horario desde la superior izquierda.
¿Cómo hago una forma de píldora con border-radius?
Pon un valor en píxeles mucho mayor que el elemento, por ejemplo border-radius: 9999px. El navegador reduce todos los radios hasta que caben, y eso da exactamente la mitad del lado más corto: un extremo totalmente redondeado. Los porcentajes no sirven aquí, porque 50% curva la sección recta del medio y la convierte en una elipse.
¿Puedo redondear una sola esquina?
Sí. Usa la forma larga de esa esquina, como border-bottom-right-radius: 12px, o escribe cuatro valores abreviados con ceros en las otras tres posiciones. La forma larga es más segura dentro de un componente, porque no borra un radio definido en otro punto de la cascada.
¿Por qué no funciona mi border-radius?
Las tres causas habituales son un elemento hijo que no se está recortando, una tabla con border-collapse en collapse y radios que se redujeron porque no cabían en la caja. Una imagen cuadrada dentro de una tarjeta redondeada necesita overflow: hidden en el padre o el mismo radio en la propia imagen.
¿Debo usar píxeles o porcentajes para border-radius?
Píxeles para casi todo, porque así la esquina se ve igual sea cual sea el tamaño final del elemento. Los porcentajes se resuelven contra el ancho en horizontal y contra el alto en vertical, así que el mismo número produce una esquina estirada en cualquier caja que no sea cuadrada. Recurre a 50% cuando quieras específicamente un círculo o una elipse.
Última actualización 19 de septiembre de 2026