Generador de Border Radius
El generador de border-radius CSS ajusta cada esquina de un elemento en porcentaje con controles deslizantes individuales o uno para todas las esquinas, incluye presets como círculo, hoja y blob, y copia el CSS.
Acerca de esta herramienta
El generador de border-radius CSS ajusta cada esquina de un elemento en porcentaje con controles deslizantes individuales o uno para todas las esquinas, incluye presets como círculo, hoja y blob, y copia el CSS.
Cómo se usa
- Mueve los controles de cada esquina o usa Todas las esquinas.
- Prueba un preset como Círculo, Hoja o Blob.
- Cambia el tamaño de la vista previa si lo necesitas.
- Haz clic en Copiar CSS.
Datos útiles
- border-radius admite hasta cuatro valores en el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda.
- border-radius: 50% en un elemento cuadrado crea un círculo.
- Los radios en porcentaje se adaptan al tamaño del elemento; los radios en píxeles se mantienen fijos.
- Radios desiguales en esquinas opuestas crean formas de hoja y blob sin necesidad de SVG.
- border-radius es compatible con todos los navegadores actuales sin prefijos.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo hago esquinas redondeadas en CSS?
Define border-radius, por ejemplo border-radius: 12px; para todas las esquinas, o cuatro valores para esquinas individuales.
¿Cómo hago un círculo con CSS?
Dale al elemento el mismo ancho y alto y border-radius: 50%.
¿En qué orden van los cuatro valores de border-radius?
Superior izquierda, superior derecha, inferior derecha, inferior izquierda: en el sentido de las agujas del reloj desde la esquina superior izquierda.
¿border-radius debe ir en px o en %?
Usa px para esquinas de tamaño uniforme en botones y tarjetas; usa % para formas como círculos y blobs que se adaptan al elemento.