Border Radius Generator

Acerca de esta herramienta

La propiedad border-radius redondea las esquinas de un elemento. Cuando los cuatro valores son iguales, se usa una forma abreviada con un solo valor. Valores diferentes crean formas asimétricas — la píldora usa 50% en todas las esquinas, la hoja alterna 0% y 50%.

Haz clic en cualquier número de esquina para escribir un valor directamente, o arrastra el control deslizante vinculado para cambiar las cuatro esquinas a la vez. Desactiva Bloquear todas las esquinas para controlar cada esquina de forma independiente.

Cómo usar

1. Introduce valores en los cuatro campos de esquina (arriba-izquierda, arriba-derecha, abajo-izquierda, abajo-derecha).
2. Activa Bloquear todas las esquinas para establecer los cuatro valores simultáneamente con el control deslizante.
3. Cambia entre unidades px y % según las necesidades del diseño.
4. Haz clic en un preset (Píldora, Hoja, Blob, etc.) para aplicar una forma predefinida al instante.

Casos de uso

Los diseñadores de UI usan border-radius para crear botones, tarjetas y formas de avatar. Los desarrolladores ajustan las esquinas redondeadas para adaptarlas a los sistemas de diseño de marca. La forma de píldora (50%) se usa comúnmente para etiquetas y distintivos. Los valores asimétricos crean formas orgánicas de hoja o blob para elementos decorativos.

Preguntas frecuentes

• ¿Cuál es la diferencia entre px y %? — px da un radio de esquina fijo independientemente del tamaño del elemento. % es relativo al ancho y alto del elemento — 50% en todas las esquinas crea un círculo perfecto (si el elemento es cuadrado).
• ¿Puedo establecer radios diferentes para cada esquina? — Sí. Desmarca Bloquear todas las esquinas y escribe valores diferentes en cada campo de esquina.
• ¿Qué significa la salida abreviada? — Cuando las cuatro esquinas son iguales, la salida es un único valor. Cuando difieren, el orden CSS es: arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda.