border-radius es una de las primeras propiedades CSS que la mayoría de la gente aprende y una de las últimas que entienden completamente. Redondear las cuatro esquinas de una tarjeta en 12 píxeles es fácil. Entonces un botón debe ser una pastilla de cualquier ancho, un avatar debe ser un círculo, una burbuja de chat necesita una esquina afilada y, de repente, el orden taquigráfico, la diferencia entre 50% y 999px, y un radio que "deja de crecer" todo importa.
Esta guía explica cómo funciona la propiedad desde la especificación hacia arriba: qué significa cada recuento de valores, en qué se diferencian los porcentajes de los píxeles, cómo los navegadores escalan radios que son demasiado grandes, cómo construir formas comunes y por qué a veces no aparecen las esquinas redondeadas. Los ejemplos se comparan con los Generador de radio de borde CSS, que muestra una vista previa de cada esquina en vivo y genera la taquigrafía válida más corta. Es uno de los Herramientas CSS en Toolz.
TL;Dr:
border-radiusredondea un elemento's esquinas. Un valor establece las cuatro esquinas, dos valores establecen los pares superior izquierda/inferior derecha y superior derecha/inferior izquierda, tres valores establecen los pares superior izquierda, luego superior derecha e inferior izquierda juntos, luego inferior derecha, y cuatro valores se ejecutan en el sentido de las agujas del reloj desde arriba a la izquierda. Los radios de píxeles son curvas fijas; Los porcentajes se miden frente al ancho y el alto por separado, por lo que50%hace un círculo sólo en un cuadrado. Cuando los radios a lo largo de un lado suman más que el lado, el navegador escala cada radio proporcionalmente. El generador de radio de borde maneja la taquigrafía por usted, del lado del cliente, gratis, sin registro.
¿qué hace la propiedad de radio de borde CSS?
los border-radius la propiedad rodea las esquinas exteriores de un elemento 's cuadro fronterizo. Cada esquina se convierte en un cuarto de elipse con un radio horizontal y un radio vertical. Cuando ambos radios son iguales, la esquina es un cuarto de círculo.
Está definido en el W3C Módulo de Antecedentes y Fronteras CSS Nivel 3, y ha sido compatible con sin prefijo en todos los navegadores principales durante más de una década, por lo que no se necesitan prefijos de proveedores.
El redondeo afecta más que la línea del borde. El fondo del elemento 's está recortado a la forma redondeada box-shadow sigue la curva y en los navegadores modernos también lo hace outline. El contenido dentro del elemento no se recorta a menos que lo agregue overflow: hidden, que es la razón más común por la que las esquinas redondeadas parecen fallar.
¿cómo funciona la taquigrafía de radio de borde?
border-radius es una abreviatura de cuatro propiedades de mano: border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius. La cantidad de valores que proporciona decide a qué esquinas se aplica cada valor.
| Valores | ejemplo | Arriba a la izquierda | Arriba a la derecha | Abajo a la derecha | Abajo a la izquierda |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
El patrón es el mismo orden en el sentido de las agujas del reloj utilizado por margin y padding, comenzando desde la esquina superior izquierda en lugar del lado superior. Los valores faltantes se completan desde su compañero diagonal: con dos valores, copias de abajo a la derecha, de arriba a la izquierda y copias de abajo a la izquierda, de arriba a la derecha. Con tres copias de abajo a la izquierda, arriba a la derecha.
El generador invierte este proceso. Colocas cada esquina con su propio control deslizante y escribe la menor cantidad de valores que producen la misma forma:
- Las cuatro esquinas iguales dan un valor.
- Arriba a la izquierda igual a abajo a la derecha y arriba a la derecha igual a abajo a la izquierda, da dos valores.
- Arriba a la derecha igual a abajo a la izquierda (pero la otra diagonal difiere) da tres valores.
- Cualquier otra cosa da cuatro.
Una consecuencia sorprende a la gente. Redondea sólo la esquina superior izquierda por 20px y el resultado es border-radius: 20px 0px 0px;, no el valor de cuatro 20px 0px 0px 0px. Ambos son correctos; la forma de tres valores es más corta porque la parte superior derecha y la inferior izquierda son cero. Cada valor mantiene su unidad, por lo que una esquina cero se imprime como 0px.
¿Cuál es la diferencia entre px y % para el radio de borde?
El radio de un píxel es un tamaño absoluto. Un radio porcentual es relativo al tamaño del elemento 's, y las partes horizontal y vertical se miden por separado: el radio horizontal frente al ancho, el radio vertical frente al alto.
En un cuadrado, esos son el mismo número. En un rectángulo no lo son, por eso 50% convierte un cuadrado en un círculo pero un rectángulo en una elipse.
Tome el generador y la caja de vista previa #39;s, que tiene 224px de ancho y 160px de alto:
| preciar | Radio horizontal | Radio vertical | Forma |
|---|---|---|---|
16px |
16px | 16px | Rectángulo redondeado, esquinas circulares |
50% |
112px (50% de 224) | 80px (50% de 160) | Elipse |
25% |
56px | 40px | Rectángulo redondeado, esquinas elípticas |
999px |
999px, escalado a 80px | 999px, escalado a 80px | Pastilla con extremos redondos |
Las otras dos unidades se comportan como píxeles una vez resueltas. em es relativo al tamaño de fuente propio del elemento ' y rem al tamaño de fuente raíz, entonces 1rem es 16px con la configuración predeterminada del navegador. Usando em investigaciones operacionales rem permite que las esquinas escalen con el tamaño del texto, lo que se adapta a botones y etiquetas que crecen con su etiqueta.
En el generador, los controles deslizantes funcionan de 0 a 200 para px, de 0 a 50 para % y de 0 a 10 para em y rem, en pasos de números enteros. Al cambiar la unidad se mantienen los números y se intercambia la unidad, por lo que 16px se convierte en 16%, no en un valor convertido.
¿por qué un gran radio fronterizo deja de volverse más redondo?
Porque la especificación no permite que las curvas de las esquinas se superpongan. Cuando los radios de un lado suman más que ese lado 's de longitud, el navegador reduce cada radio del elemento en el mismo factor hasta que encajan.
los regla de superposición de esquinas funciona así. Para cada uno de los cuatro lados, divida la longitud del lado 's por la suma de los dos radios que lo tocan. Tome la más pequeña de esas proporciones, llámela f. Si f es menor que 1, multiplique cada radio por f.
Aquí está el cálculo para border-radius: 999px en el cuadro de vista previa de 224 por 160:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Cada esquina termina con un radio de 80px, exactamente la mitad de la altura de 160px, por lo que los extremos cortos se convierten en semicírculos perfectos. Lo mismo sucede a 200px, la parte superior del control deslizante de píxeles: f es 160 / 400 = 0,4, y 200 × 0,4 vuelve a ser 80px. Más allá de la mitad del lado más corto, el radio de un píxel deja de cambiar cualquier cosa.
Siguen dos resultados prácticos. Un botón de píxel puede utilizar cualquier valor de píxel muy grande y permanece como una píldora en cualquier ancho. Y debido a que la escala es proporcional en las cuatro esquinas, una sola esquina de gran tamaño también reduce las demás. Establezca la parte superior izquierda en 999px y deje el resto en 20px, y las esquinas de 20px se reducirán con él.
¿cómo se hacen formas comunes con el radio del borde?
La mayoría de las formas redondeadas en las interfaces provienen de un puñado de recetas. El generador tiene ajustes preestablecidos para los comunes.
| Forma | CSS | notas |
|---|---|---|
| Agudo | border-radius: 0px; |
El valor predeterminado para la mayoría de los elementos |
| Sutil | border-radius: 6px; |
Entradas, botones pequeños |
| Tarjeta | border-radius: 12px; |
Paneles y tarjetas |
| Redondeado | border-radius: 16px; |
El generador 's valor inicial |
| Pastilla | border-radius: 999px; |
Funciona en cualquier ancho mediante escalado superpuesto |
| Círculo | border-radius: 50%; |
Necesita igual ancho y alto |
| Hoja | border-radius: 0px 24px; |
Dos esquinas opuestas redondeadas |
| Mancha | border-radius: 60% 40%; |
Forma orgánica a partir de porcentajes desiguales |
| Burbuja de habla | border-radius: 16px 16px 16px 0px; |
Una esquina afilada cerca del altavoz |
| Pestaña | border-radius: 8px 8px 0px 0px; |
Parte superior redondeada, parte inferior plana |
Círculo. Establecer 50% sobre un elemento de igual ancho y alto. Para avatares, agregue aspect-ratio: 1 y object-fit: cover en la imagen, una foto no cuadrada no se estira formando una elipse.
Pastilla. Utilice un valor de píxel grande en lugar de 50%. Pe un button larg, 50% produce una elipse con extremos puntiagudos, porque el radio horizontal es la mitad del ancho. 999px en su lugar, se escala a la mitad de la altura, dando extremos redondos.
Mancha. El preestablecido 60% 40% establece arriba a la izquierda y abajo a la derecha al 60% y los otros dos al 40%. En el cuadro de vista previa, los radios horizontales a lo largo del borde superior son 134,4px y 89,6px, que suman exactamente 224px, por lo que no se produce ningún escalado y las dos curvas no quedan con un borde recto entre ellas. Los ajustes preestablecidos pueden pasar del rango del control deslizante: Blob usa 60%, Pill usa 999px y la salida mantiene esos valores hasta que mueve un control deslizante.
Burbuja y pestaña del discurso. Ninguna forma tiene un par diagonal coincidente, por lo que ambas necesitan los cuatro valores. Establezca las esquinas individualmente en el generador y confirma que no existe una forma más corta.
¿cuál es la sintaxis de barra diagonal en border-radius?
Una barra separa los radios horizontales de los verticales, por lo que cada esquina puede ser una elipse no circular con los tamaños que elija directamente.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Los valores a cada lado de la barra siguen las mismas reglas de uno a cuatro que la taquigrafía normal. El generador Toolz no escribe sintaxis de barra diagonal: establece un radio por esquina, que cubre círculos, píldoras, tarjetas y manchas. Para formas de huevos y formas de lentes personalizadas, comience desde la salida del generador 's y agregue la parte de barra a mano.
¿Por qué no se muestran mis esquinas redondeadas?
Cuando border-radius parece no hacer nada, la causa casi siempre es una de ellas.
| Síntoma | Causa | Arreglar |
|---|---|---|
| Imagen o niño sale de las esquinas | Los niños no se recortan de forma predeterminada | Añadir overflow: hidden al padre redondeado, o también al niño |
| Ningún cambio visible en absoluto | El elemento no tiene fondo, borde ni sombra | Dale un color de fondo o borde para que la forma sea visible |
| Las esquinas de las mesas permanecen cuadradas | border-collapse: collapse sobre la mesa |
aprovechamiento border-collapse: separate en compañía de border-spacing: 0, o rodear un envoltorio |
| El círculo parece un óvalo | El ancho y el alto difieren | Establezca dimensiones iguales o aspect-ratio: 1 |
| La píldora tiene extremos puntiagudos | Usando 50% sobre un elemento amplio |
Utilice un valor px grande como 999px |
| El radio deja de aumentar | Escalado superpuesto | Esperado; El radio está limitado a la mitad del lado más corto |
| Las esquinas de los elementos interiores parecen más gruesas | El radio interior es igual al radio exterior dentro del acolchado | Establezca el radio interior en el radio exterior menos el acolchado |
El último es sutil. Una tarjeta con border-radius: 16px y padding: 8px contener una imagen con el mismo radio de 16px parece desigual, porque la curva interior debería ser más cerrada. El radio interior que sigue a la curva exterior es 16 menos 8, por lo que 8px.
¿cómo se combina el radio de borde con sombras y gradientes?
Las esquinas redondeadas rara vez se envían solas. Una carta suele tener un fondo de sombra y, a menudo, degradado, y ambas siguen la forma redondeada automáticamente.
box-shadow traza el cuadro de borde redondeado, por lo que una suave sombra debajo de una tarjeta de 12px tiene esquinas redondeadas de 12px sin ningún trabajo adicional. El generador de sombras de caja obtiene una vista previa de sombras en un elemento redondeado y el guía de sombras de caja explica los valores de compensación, desenfoque y dispersión detrás de ellos.
Los fondos, incluidos los degradados, también se recortan a la forma redondeada. Para diseñar el relleno, utilice el Generador de gradiente CSS; el Guía de gradiente CSS camina a través de la sintaxis. Si el tamaño de la esquina debe escalarse con la ventana gráfica en lugar de permanecer fijo, el Generador de abrazaderas CSS construye un clamp() valor que puedes usar como radio, por ejemplo una tarjeta que es de 8px en teléfonos y de 20px en pantallas anchas.
Usando el generador, paso a paso
- Elige un preset como Tarjeta, Pastilla, Círculo o Blob, o comience desde las esquinas predeterminadas de 16px.
- Ajustar esquinas. La palanca de esquina se cambia de forma predeterminada a Independiente, donde cada control deslizante mueve solo su propia esquina. Cambie a Vinculado para mover los cuatro juntos.
- Elige una unidad: px, %, em o rem.
- Consulta la vista previa. El cuadro de gradiente se actualiza a medida que arrastra, incluido el escalado de superposición en valores grandes.
- Copie el CSS. El botón Copiar CSS copia el completo
border-radius:declaración en su forma más breve.
Todo se ejecuta en el lado del cliente: JavaScript genera la vista previa y el código en su navegador, no se carga nada y la página sigue funcionando sin conexión una vez cargada. Cuando estás listo, abra el generador de radio de borde, coloca tus esquinas y pega la declaración directamente en tu hoja de estilo.
