Generador de Esquinas Redondeadas
Fije las cuatro esquinas y obtenga el CSS más corto que las produce, con un aviso cuando la caja es demasiado pequeña.
Resultados
Qué hace esta herramienta
Redondear las cuatro esquinas por igual es fácil. Redondear tres, o dejar una en escuadra, obliga a recordar en qué orden va la forma corta y cómo se reparten las versiones de dos y tres valores. Esta página toma las cuatro esquinas que quiere y escribe la línea más corta que produce exactamente esas, en la unidad en que esté trabajando. También comprueba las esquinas contra el tamaño de la caja, porque el CSS encoge en silencio todo lo que no quepa.
Fórmula
escribe la forma más corta de border-radius que da las cuatro esquinas pedidas
Variables
| Símbolo | Significado | Unidad |
|---|---|---|
top_left | Esquina superior izquierda | — |
top_right | Esquina superior derecha | — |
bottom_right | Esquina inferior derecha | — |
bottom_left | Esquina inferior izquierda | — |
unit | Unidad | — |
width | Ancho de la caja | px |
height | Alto de la caja | px |
OUT | El CSS | — |
VA | Solo el valor | — |
DC | Esquinas diferentes | — |
LC | Esquina mayor | — |
LI | Máximo que permite la caja | px |
CP | El navegador lo recortará | — |
PI | Queda con forma de píldora | — |
Ejemplo resuelto
- Esquina superior izquierda16
- Esquina superior derecha16
- Esquina inferior derecha4
- Esquina inferior izquierda16
- Unidadpx
- Ancho de la caja240 px
- Alto de la caja140 px
- El CSSborder-radius: 16px 16px 4px;
- Solo el valor16px 16px 4px
- Esquinas diferentes2
- Esquina mayor16,0
- Máximo que permite la caja70,0 px
- El navegador lo recortaráNo
- Queda con forma de píldoraNo
Preguntas frecuentes
¿Por qué a veces me da menos de cuatro números?
Porque el CSS permite decir lo mismo de forma más breve cuando las esquinas se repiten. Un valor define las cuatro. Dos definen el par superior izquierda e inferior derecha, y luego el otro par. Tres definen la superior izquierda, luego las dos esquinas de la otra diagonal, luego la inferior derecha. Esta página escribe siempre la forma más corta que produce exactamente las esquinas que pidió, que es lo que escribiría a mano si tuviera la regla memorizada.
¿Qué significa «el navegador lo recortará»?
Que ha pedido esquinas mayores de las que la caja admite. Cuando dos esquinas del mismo borde suman más que la longitud de ese borde, el CSS las reduce todas en proporción hasta que quepan, así que la forma que sale no es la que escribió. No es un error y nada se rompe, pero los números de su hoja de estilos dejan de describir lo que aparece en pantalla, y cuando la caja cambie de tamaño el resultado cambiará con ella.