Categoría: Desarrollo
Generador de border-radius CSS
Redondea esquina por esquina con vista previa
Mueve un control por esquina y copia la declaración border-radius. Activa las esquinas elípticas para la sintaxis con barra que crea formas orgánicas.
border-radius: 12px;
La vista previa es un elemento real con el valor aplicado, así que ves lo mismo que dibuja el navegador.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
border-radius parece un solo número hasta que tres esquinas tienen que ser distintas, y entonces la forma abreviada engaña: los cuatro valores van en sentido horario desde la superior izquierda, y la variante con barra da a cada esquina un radio horizontal antes de la barra y uno vertical después. Esa segunda forma es la que dibuja las siluetas suaves y asimétricas que se leen como orgánicas en lugar de como una caja redondeada. Aquí tienes un control por esquina, un elemento real con el valor aplicado en vez de una imagen, y una salida contraída como la escribiría una persona: cuatro esquinas iguales salen como un único valor.
Cómo se usa
- Elige la unidad y desvincula las esquinas si quieres que difieran.
- Ajusta cada esquina hasta que la vista previa te convenza.
- Activa las esquinas elípticas para formas orgánicas y copia la declaración.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Qué significa la barra del valor?
- Todo lo anterior a la barra es el radio horizontal de cada esquina y lo posterior el vertical. Valores distintos a cada lado crean una elipse en lugar de un cuarto de círculo.
- ¿Porcentajes o píxeles?
- Los píxeles mantienen la misma curva a cualquier tamaño, que es lo que suelen querer botones y tarjetas. Los porcentajes escalan con el elemento: un 50 por ciento en un cuadrado da un círculo.
- ¿Por qué la salida tiene menos de cuatro valores?
- CSS contrae las esquinas repetidas y esta herramienta también: cuatro esquinas iguales son un valor y una diagonal coincidente son dos. El resultado es idéntico, solo que más corto.