Sobre esta herramienta
Las esquinas redondeadas marcan el tono de una interfaz, y border-radius puede hacer mucho más que un único valor uniforme. Este generador te permite redondear cada esquina de forma independiente y usar la sintaxis completa de ocho valores horizontal/vertical para crear formas «blob» suaves y orgánicas que no se parecen en nada a un rectángulo plano.
Arrastra los deslizadores, observa la forma actualizarse en vivo y copia el CSS de border-radius. Todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Cuál es la diferencia entre el modo vinculado y el modo por esquina?
El modo vinculado aplica un mismo radio en píxeles a las cuatro esquinas; al desmarcarlo se pasa al modo por esquina, donde defines un porcentaje horizontal y vertical independiente para cada esquina.
¿Puedo crear esquinas elípticas (no circulares)?
Sí. Cambia al modo por esquina y define porcentajes horizontales y verticales distintos — border-radius de CSS admite dos radios por esquina, y esta herramienta expone ambos.
¿Cómo hago un círculo perfecto o una forma de píldora?
Para un círculo, pon el radio uniforme al 50% del ancho/alto del elemento (o usa el modo por esquina al 50%/50%); para una forma de píldora, pon el radio al menos a la mitad de la altura del elemento.
¿Se sube mi diseño a algún sitio?
No. El cuadro de vista previa y el CSS generado se calculan únicamente de forma local en tu navegador.
¿Por qué a veces la salida CSS incluye una barra (/)?
La barra separa los radios horizontal y vertical (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — solo aparece en el modo por esquina, ya que el modo vinculado solo necesita un valor.