Generador de Border Radius CSS
Este generador de border-radius CSS te permite diseñar esquinas redondeadas de forma visual y copiar CSS limpio en segundos. Arrastra las manijas sobre una forma en vivo, escribe valores exactos o toca un preajuste, y el código border-radius se actualiza mientras trabajas.
Usa el modo Simple para las esquinas redondeadas de todos los días en botones, tarjetas y campos, o cambia al modo Avanzado para la sintaxis completa de 8 valores con barra que crea manchas orgánicas, huevos, gotas y otras formas libres. Está pensado tanto para desarrolladores que quieren valores exactos como para diseñadores que exploran formas decorativas.
Cómo usarlo
Ajusta cada esquina
En el modo Simple, usa los deslizadores o los campos numéricos para Superior izquierda, Superior derecha, Inferior derecha e Inferior izquierda. Mantén Bloquear todo activo para mover todas las esquinas juntas, o desactívalo para dar forma a cada esquina por separado.
Arrastra sobre la vista previa
Toma las manijas directamente sobre la forma en vivo para redondear las esquinas a ojo. La vista previa, las manijas y la salida de CSS se actualizan al instante mientras arrastras.
Pasa a Avanzado o elige un preajuste
Cambia al modo Avanzado para tener radio horizontal y vertical independiente por esquina con la sintaxis H1 H2 H3 H4 / V1 V2 V3 V4, o abre Preajustes para aplicar una forma lista para usar. Toca Forma aleatoria para una mancha al instante.
Copia el CSS
La declaración border-radius generada siempre aparece debajo de la vista previa. Toca Copiar CSS para enviarla al portapapeles y pegarla directo en tu hoja de estilos.
Funciones
Modos Simple y Avanzado
El modo Simple ofrece controles para las 4 esquinas con redondeo estándar; el modo Avanzado desbloquea la sintaxis completa de 8 valores con radio horizontal y vertical independiente por esquina.
Manijas visuales para arrastrar
Las manijas se sitúan directamente sobre la forma: 4 en las esquinas en el modo Simple y 8 a lo largo de los bordes con líneas guía en el modo Avanzado.
Unidades px y porcentaje
Cambia entre px y % en cualquier momento. Tus valores actuales se convierten de forma automática para que la forma se mantenga consistente.
Bloquear todas las esquinas
Bloquea para aplicar un mismo valor a las cuatro esquinas a la vez, o desbloquea para ajustar cada esquina de forma independiente.
12 preajustes integrados
Con un toque aplicas Redondeado, Píldora, Círculo, Hoja, Boleto, Gota, Huevo, Mancha 1-3, Insignia o Mensaje, cada uno mostrado como una miniatura de la forma.
Formas aleatorias
Forma aleatoria pasa al modo Avanzado y genera una mancha orgánica nueva cada vez que la tocas.
Vista previa ajustable
Cambia el ancho y el alto de la vista previa de 100px a 500px para ver cómo se lee tu radio en distintos tamaños de elemento.
Selectores de color
Define los colores de la forma y del fondo para previsualizar las esquinas sobre los colores que de verdad usas.
Calculadora de radio anidado
Ingresa un radio exterior y el relleno para obtener el radio interior correcto de un elemento hijo, con una vista previa visual del anidado.
CSS y copia al instante
El CSS se actualiza en tiempo real, usa notación abreviada con la sintaxis de barra cuando hace falta y se copia al portapapeles con un solo toque.
Preguntas frecuentes
¿Cómo hago esquinas redondeadas en CSS?
Aplica la propiedad border-radius, por ejemplo border-radius: 12px;. Con este generador defines cada esquina de forma visual y copias la declaración exacta, así no tienes que adivinar valores ni recordar el orden de las esquinas.
¿Qué significan los cuatro valores de border-radius?
Cuando das cuatro valores, se aplican en sentido horario empezando por la superior izquierda: Superior izquierda, Superior derecha, Inferior derecha, Inferior izquierda. Los controles del modo Simple están etiquetados con esas mismas esquinas, así que el valor que cambias coincide con la esquina que ves.
¿Cómo hago un círculo perfecto con border-radius?
Ajusta cada esquina a 50% en un elemento cuadrado. El preajuste Círculo integrado lo hace por ti: solo mantén iguales el ancho y el alto de la vista previa para obtener un círculo de verdad y no un óvalo.
¿Cómo redondeo solo las esquinas de arriba?
Desactiva Bloquear todo y luego sube solo Superior izquierda y Superior derecha, dejando las esquinas de abajo en 0. La salida queda como border-radius: 16px 16px 0 0;, ideal para pestañas y encabezados de tarjetas.
¿Qué es la sintaxis de barra en border-radius?
La sintaxis completa es border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Los valores antes de la barra definen el radio horizontal de cada esquina y los de después definen el radio vertical. Cuando difieren, las esquinas se vuelven elípticas, que es como se crean las manchas orgánicas. Cambia al modo Avanzado para editar estos ocho valores.
¿Debo usar px o % para border-radius?
Usa px para elementos de tamaño fijo como botones e iconos donde quieres una esquina exacta. Usa % para elementos adaptables y formas orgánicas: 50% en un cuadrado crea un círculo. El cambio de unidad convierte tus valores actuales cuando alternas.
¿Para qué sirve la Calculadora de radio anidado?
Cuando un hijo redondeado se sitúa dentro de un padre redondeado con relleno, el radio interior debe ser menor para verse bien. La fórmula es interior = max(0, exterior − relleno). Ingresa el radio exterior y el relleno y la calculadora devuelve el radio interior correcto con una vista previa visual; por ejemplo, un padre de 16px con 8px de relleno da un radio interior de 8px.
¿Puedo usar el CSS generado en cualquier framework?
Sí. La salida es CSS plano y basado en estándares que funciona en todos los navegadores modernos. Pégalo en una hoja de estilos, en un estilo en línea o en una solución de CSS-in-JS sin ningún cambio.
Aún no hay comentarios. ¡Sé el primero en comentar!