Generador CSS Border Radius - Redondear Esquinas Visualmente Online
Crea CSS border-radius con controles visuales y vista previa. Diseña esquinas redondeadas, formas píldora y blobs — copia CSS listo para usar.
Preguntas Frecuentes
Que es CSS border-radius?
CSS border-radius es una propiedad abreviada que redondea las esquinas del borde exterior de un elemento. Puedes establecer un solo radio para crear esquinas circulares, o dos radios (horizontal y vertical) por esquina para crear esquinas elipticas. Es una de las propiedades CSS mas utilizadas para crear botones redondeados, tarjetas, avatares y formas decorativas.
Como uso este generador de border-radius?
Elige entre el modo Simple (control de 4 esquinas) o el modo Avanzado (8 valores con horizontal/vertical por esquina). Ajusta el radio de cada esquina usando controles deslizantes, entradas numericas o arrastrando los controles en el elemento de vista previa. Usa el boton de vincular para establecer todas las esquinas al mismo valor. Opcionalmente, comienza desde una forma preestablecida y personaliza desde ahi. Copia el codigo CSS generado con un solo clic.
Es segura y privada esta herramienta?
Si. Esta herramienta se ejecuta 100% en tu navegador usando JavaScript del lado del cliente. No se envia ningun dato a ningun servidor. Toda la generacion de CSS y la representacion de la vista previa ocurren localmente en tu dispositivo, garantizando total privacidad.
Cual es la diferencia entre el modo Simple y Avanzado?
El modo Simple usa un valor por esquina (redondeo circular), produciendo CSS como border-radius: 10px 20px 30px 40px. El modo Avanzado usa la notacion de barra con dos valores por esquina (radios horizontal y vertical), produciendo CSS como border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%. La notacion de barra crea esquinas elipticas donde las curvaturas horizontal y vertical difieren, permitiendo formas organicas.
Cuando debo usar porcentaje vs pixeles?
Usa porcentaje (%) cuando quieras que el border-radius escale proporcionalmente con el tamano del elemento -- por ejemplo, border-radius: 50% siempre crea un circulo perfecto sin importar las dimensiones del elemento. Usa pixeles (px) cuando quieras una curvatura fija y consistente -- por ejemplo, border-radius: 8px para esquinas redondeadas consistentes en tarjetas de diferentes tamanos.
Como funciona la optimizacion de la abreviatura CSS?
La herramienta produce automaticamente el CSS valido mas compacto. Si las 4 esquinas son iguales (ej., 10px), genera border-radius: 10px en lugar de repetir el valor cuatro veces. Si las esquinas diagonales coinciden (TL=BR y TR=BL), usa la abreviatura de 2 valores. Esto coincide con la especificacion CSS y te ahorra escribir codigo redundante.
Ejemplos de Codigo
// CSS Border Radius Generator
function optimizeShorthand(values, unit) {
const [a, b, c, d] = values;
if (a === b && b === c && c === d) return `${a}${unit}`;
if (a === c && b === d) return `${a}${unit} ${b}${unit}`;
if (b === d) return `${a}${unit} ${b}${unit} ${c}${unit}`;
return `${a}${unit} ${b}${unit} ${c}${unit} ${d}${unit}`;
}
function generateBorderRadius(tl, tr, br, bl, unit = 'px') {
return `border-radius: ${optimizeShorthand([tl, tr, br, bl], unit)};`;
}
function generateElliptical(h, v, unit = '%') {
const hPart = optimizeShorthand(h, unit);
const vPart = optimizeShorthand(v, unit);
if (hPart === vPart) return `border-radius: ${hPart};`;
return `border-radius: ${hPart} / ${vPart};`;
}
console.log(generateBorderRadius(10, 20, 10, 20, 'px'));
// border-radius: 10px 20px;
console.log(generateBorderRadius(8, 8, 8, 8, 'px'));
// border-radius: 8px;
console.log(generateElliptical([30, 70, 70, 30], [70, 30, 30, 70], '%'));
// border-radius: 30% 70% / 70% 30%;