Generador de CSS Border Radius
Disena border-radius visualmente y obtiene codigo CSS listo para usar
Controles de Border Radius
Vista Previa en Vivo
Salida CSS
Ejemplos de Uso
Circulo Perfecto
Crea un elemento perfectamente redondo con 50% de border radius en todas las esquinas.
Forma de Pastilla
Disena un boton en forma de pastilla con grandes valores de border radius horizontal.
Forma Organica
Crea formas organicas unicas estableciendo diferentes valores para cada esquina.
Caracteristicas
Vista Previa Visual en Vivo
Ve el efecto de border radius actualizarse en tiempo real mientras ajustas los controles
Control Individual de Esquinas
Ajusta cada esquina independientemente o vincularlas todas para un border radius uniforme
Formas Predefinidas
Acceso rapido a formas comunes como circulo, pastilla, rectangulo redondeado y personalizado
Privacidad Primero
Todo se ejecuta en tu navegador — ningun dato se envia a ningun servidor
Como Usar?
Ajusta las Esquinas
Usa los controles deslizantes para establecer el border radius de cada esquina, o activa el modo vinculado para valores uniformes.
Previsualiza la Forma
Observa como la vista previa en vivo se actualiza instantaneamente al cambiar los valores.
Copia el CSS
Haz clic en el boton Copiar CSS para copiar el codigo border-radius generado al portapapeles.
Preguntas Frecuentes
Que Hace Esta Herramienta?
Este generador de border-radius te permite disenar esquinas redondeadas de forma visual. Mueve los controles, observa la vista previa actualizarse al instante y copia el CSS generado con un clic. Se acabo adivinar valores en tu hoja de estilos.
Como Funciona border-radius en CSS
La propiedad CSS border-radius acepta valores en pixeles, porcentajes o ems para cada esquina. Puedes definir las cuatro a la vez con la forma abreviada (border-radius: 10px) o controlar cada una por separado. Los porcentajes son relativos a las dimensiones del elemento, por eso 50% en un cuadrado crea un circulo.
Formas Predefinidas y Disenos Personalizados
Arranca rapido con presets de circulos, pastillas y rectangulos redondeados. O experimenta con valores asimetricos en cada esquina para crear formas organicas tipo blob, muy de moda en el diseno de interfaces modernas.
Compatible con Todos los Navegadores Modernos
La propiedad border-radius es compatible con Chrome, Firefox, Safari y Edge. La sintaxis abreviada que genera esta herramienta es el formato mas compatible, asi que puedes pegarla directamente en tu proyecto sin prefijos de vendor.