Herramientas CSS/Generador de Radio de Borde
Generador de Radio de Borde
Crea valores CSS border-radius con controles visuales y presets
Controles
Editor Visual
8px
8px
8px
8px
Arrastra los controles de esquina para ajustar el radio
Radio de Borde
8px
Presets
Vista Previa
200px
Vista previa con la configuración actual
Código CSS
border-radius: 8px;Guía de Radio de Borde
Aprende a crear esquinas redondeadas con CSS
¿Qué es Border Radius?
La propiedad CSS border-radius redondea las esquinas del borde exterior de un elemento. Puedes establecer un único radio para crear esquinas circulares, o especificar diferentes radios para cada esquina para crear formas más complejas. Es una de las propiedades CSS más utilizadas en el diseño web moderno.
Cómo Usar Esta Herramienta
- Arrastra los controles de esquina para ajustar visualmente los valores del radio
- Activa 'Vincular Esquinas' para editar todas juntas o por separado
- Elige el tipo de unidad (px, % o rem) según tus necesidades
- Usa presets para patrones comunes, luego copia el CSS
Consejos Pro
Soporte del Navegador
border-radius es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. Tiene excelente compatibilidad y es seguro para uso en producción.
Preguntas Frecuentes
¿Cómo hago un círculo perfecto con border-radius?
Establece border-radius a 50% en un elemento cuadrado (ancho y alto iguales). Esto crea un círculo perfecto independientemente del tamaño. Para rectángulos, 50% crea una elipse.
¿Cuál es la diferencia entre unidades px y %?
Los valores en píxeles (px) crean esquinas redondeadas de tamaño fijo que no escalan con el elemento. Los valores en porcentaje (%) son relativos a las dimensiones del elemento - 50% siempre crea el máximo redondeo posible. Usa px para esquinas consistentes, % para diseños responsivos.
¿Puedo usar diferentes radios para cada esquina?
Sí, border-radius acepta de 1 a 4 valores: 1 valor se aplica a todas las esquinas, 2 valores establecen superior-izquierda/inferior-derecha y superior-derecha/inferior-izquierda, 4 valores establecen cada esquina individualmente (sup-izq, sup-der, inf-der, inf-izq).
¿Cómo creo una forma de blob asimétrica?
Usa 8 valores para control completo: border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px. Los valores antes de '/' controlan los radios horizontales, los valores después de '/' controlan los radios verticales para cada esquina.
¿Border-radius afecta el contenido del elemento?
Border-radius solo redondea el borde visual. El contenido aún puede desbordarse hacia las esquinas a menos que también establezcas 'overflow: hidden'. Esto recorta el contenido para que coincida con la forma redondeada, útil para imágenes dentro de contenedores redondeados.