Puntos clave
- 01Tres modos — uniforme, por esquina y elíptico — cubren todo, desde botones redondeados simples hasta formas blob orgánicas.
- 02Soporta unidades px, %, y rem, cada una con comportamiento de escalado diferente.
- 03El modo elíptico expone radios horizontales y verticales por esquina para la sintaxis completa de border-radius de CSS.
- 04La vista previa en vivo utiliza la propiedad CSS real, así que lo que ves es exactamente lo que tu navegador renderizará.
De esquinas redondeadas simples a formas blob orgánicas
Un valor de border-radius de cuatro esquinas es fácil de escribir de memoria — border-radius: 8px. Pero una vez que necesitas radios diferentes por esquina, o quieres la sintaxis elíptica de CSS para formas orgánicas, la abreviatura se vuelve críptica rápidamente. La forma completa es top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — ocho valores en un orden específico.
El generador de border-radius de Handytool te permite arrastrar controles deslizantes para cada esquina en cualquier modo y ver la forma actualizarse en vivo. Cambia entre px, %, y rem sin recalcular, y copia la abreviatura correcta o la declaración CSS de forma larga cuando termines.
Cómo diseñar un border-radius
- 01
Elige un modo
El modo uniforme aplica un radio a las cuatro esquinas. El modo por esquina controla cada esquina independientemente. El modo elíptico añade un radio horizontal y vertical separado por esquina.
- 02
Elige una unidad
Elige px para tamaños absolutos, % para valores que escalen con las dimensiones del elemento, o rem para tamaños vinculados al tamaño de fuente raíz.
- 03
Arrastra los controles deslizantes
Ajusta los valores del radio y observa cómo se actualiza el elemento de vista previa en vivo. Para el modo por esquina, arrastra el control deslizante de cada esquina independientemente.
- 04
Previsualiza la forma
El cuadro de vista previa aplica la propiedad CSS border-radius real, así que la forma que ves es la forma que tu navegador renderizará.
- 05
Copia el CSS
Haz clic en Copiar para obtener la declaración de border-radius y pégala en tu hoja de estilos.
Formas comunes y cuándo usar cada modo
- 01Botón píldora: modo % uniforme, establecido al 50% — siempre una píldora completa independientemente del ancho del botón
- 02Tarjeta con redondeado sutil: modo px uniforme, 8–16px — el patrón de UI más común
- 03Etiqueta o rótulo asimétrico: modo por esquina, afilado en un lado, redondeado en el otro
- 04Círculo de avatar: modo % uniforme, 50% — escala con el contenedor de imagen
- 05Forma blob orgánica: modo elíptico con diferentes valores X/Y por esquina
Vista previa instantánea, nada cargado
El generador de border-radius es completamente del lado del cliente. Los controles deslizantes, cambios de modo y cambios de unidad actualizan la vista previa inmediatamente sin viaje al servidor. No hay cuenta ni límite de velocidad.
La herramienta funciona en todos los navegadores modernos. La propiedad border-radius — incluyendo la sintaxis elíptica X/Y — es compatible en todas las versiones evergreen de Safari, Firefox, Edge y Chrome, así que el resultado es seguro de usar sin prefijos de proveedor o alternativas.
Preguntas frecuentes del generador de border-radius
¿Cuál es la diferencia entre px y % para border-radius?
Los radios en píxeles son absolutos — 16px siempre es 16px. Los radios en porcentaje son relativos a las dimensiones del elemento, así que 50% crea un círculo perfecto en una caja cuadrada y una elipse en un rectángulo.
¿Cuándo debo usar el modo elíptico?
Usa el modo elíptico cuando quieras una esquina que sobresalga más en un eje — para una píldora horizontal, una forma de hoja o un blob orgánico. CSS expresa esto como radios-X / radios-Y en la abreviatura de border-radius.
¿Por qué mi radio de porcentaje se ve mal en una caja no cuadrada?
Los porcentajes horizontales son relativos al ancho del elemento; los porcentajes verticales a su alto. En un elemento ancho y corto, las esquinas se estiran en elipses en lugar de arcos circulares.
¿Funciona el resultado en todos los navegadores?
Sí — border-radius incluyendo sintaxis elíptica es compatible en todos los navegadores modernos: todas las versiones evergreen de Safari, Firefox, Edge y Chrome. No se necesitan prefijos de proveedor.
¿Cómo creo un círculo perfecto con border-radius?
Establece todas las esquinas al 50% en modo porcentaje en un elemento cuadrado. El elemento también necesita ancho y alto iguales — usa aspect-ratio: 1 / 1 si el tamaño es dinámico.