Generador de Border Radius CSS — Esquinas Redondeadas Visuales
Genere el border-radius CSS visualmente. Controle cada esquina independientemente, cambie px o %, vea una vista previa en vivo y copie el código. 100% en su navegador.
Generador de Border Radius CSS — Diseñe Esquinas Redondeadas Visualmente
Cree el border-radius perfecto con un editor visual. Ajuste cada esquina independientemente o vincúlelas todas juntas, cambie entre píxeles y porcentajes, observe la vista previa en vivo y copie el CSS listo para usar. Se acabó el ensayo y error.
Funciones
- Esquinas independientes: configure superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda por separado
- Modo vinculado: cambie las cuatro esquinas a la vez con un solo control deslizante
- px o %: cambie de unidad — los porcentajes crean curvas elípticas suaves
- Vista previa en vivo: vea la forma actualizarse al instante en un elemento de ejemplo
- Salida CSS limpia: copie una sola propiedad lista para pegar
Entendiendo border-radius
El atajo border-radius toma hasta cuatro valores, aplicados en sentido horario empezando desde la esquina superior-izquierda: superior-izquierda superior-derecha inferior-derecha inferior-izquierda. Un valor de 0 significa una esquina afilada; valores más altos producen esquinas más redondeadas.
px vs % — ¿cuál es la diferencia?
- Píxeles (px): un radio fijo independientemente del tamaño del elemento — predecible y consistente
- Porcentaje (%): relativo a las dimensiones del elemento. Establecer todas las esquinas al 50% en un cuadrado lo convierte en un círculo perfecto
Formas comunes
- Tarjeta redondeada: 8–16px en todas las esquinas
- Píldora / botón: un valor px grande como 999px
- Círculo: 50% en todas las esquinas (en un elemento cuadrado)
- Bocadillo de diálogo: redondee tres esquinas, deje una afilada
Privacidad
Esta herramienta funciona completamente en su navegador. Nada se sube ni se almacena.