Generador de Border Radius CSS Gratuito en Línea
Genera border-radius CSS visualmente. Controla las cuatro esquinas de forma independiente.
Who uses the Generador de Border Radius CSS?
- Desarrolladores frontend generando valores border-radius para componentes de sistemas de diseño.
- Diseñadores UI probando opciones de redondeo de esquinas para lograr el peso visual adecuado.
- Principiantes en CSS aprendiendo propiedades border-radius mediante exploración visual interactiva.
How the Generador de Border Radius CSS works
Usa los controles deslizantes para controlar independientemente el radio de cada una de las cuatro esquinas.
Marca «Link all corners» para que los cuatro controles se muevan juntos y logres un redondeo uniforme.
Previsualiza la forma en vivo en un elemento de tarjeta de ejemplo.
Copia el valor CSS border-radius generado para usarlo directamente en tu hoja de estilos.
Tips & tricks
- Desmarca «Link all corners» para dar forma a esquinas asimétricas — útil para formas de burbuja de diálogo o de pestaña.
- El CSS generado usa un solo radio por esquina (border-radius: TL TR BR BL) — para esquinas elípticas, edita el valor copiado a mano con la sintaxis de barra.
- El orden de las esquinas en la notación abreviada de CSS siempre es en sentido horario empezando por arriba-izquierda — coincidiendo con las etiquetas de los controles en esta herramienta.
- Valores de radio muy altos en un elemento pequeño se topan visualmente en cuanto las esquinas se encuentran en el centro.
Frequently Asked Questions
¿Cuál es la notación abreviada de CSS border-radius?
Un valor: border-radius: 8px (todas las esquinas iguales). Cuatro valores: border-radius: 10px 20px 30px 40px (arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda en sentido horario). Dos valores: border-radius: 10px 20px (AI+AD inv., AD+AI).
¿Cómo creo un círculo perfecto con CSS?
Establece border-radius: 50% en un elemento cuadrado (ancho y alto iguales). Para elementos no cuadrados, 50% crea una elipse. Usa border-radius: 50% en un div con ancho y alto coincidentes para un círculo.
¿Qué son los radios de borde elípticos?
CSS border-radius admite radios horizontales y verticales separados por esquina mediante una sintaxis de 8 valores: border-radius: 10px 40px / 40px 10px crea una forma orgánica tipo «blob». Esta herramienta no genera esa sintaxis — controla un único valor de radio por esquina.
¿Puedo crear formas orgánicas tipo «blob» con border-radius?
Sí, usando la sintaxis completa de 8 valores de CSS (radios horizontales y verticales distintos en cada esquina), escrita a mano. Esta herramienta cubre el caso más común de un solo radio por esquina; para formas elípticas/blob, escribe el valor border-radius directamente.
¿Qué valor crea esquinas redondeadas típicas de «tarjeta»?
4–8px es estándar para tarjetas sutiles. 12–16px es común en tarjetas UI modernas. 24px+ se usa para elementos estilo «pill» o «chip». Valores cercanos a 50 en una tarjeta pequeña empiezan a verse extremos.
Is my data safe when using the Generador de Border Radius CSS?
Completely safe. The Generador de Border Radius CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generador de Border Radius CSS output in commercial projects?
Yes. The Generador de Border Radius CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generador de Border Radius CSS follow official standards?
Yes. The Generador de Border Radius CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.