DevToolPal
ES

Generador de border-radius CSS

Ajusta el border-radius CSS esquina por esquina, con esquinas elípticas y formas orgánicas, en px, % o rem, con vista previa en vivo, ajustes predefinidos y el CSS más corto para copiar.

Se ejecuta en local, nunca se sube

Esquinas

Unidad

Vista previa

CSS

Predefinidos
CSS de border-radius
 
 
 
 
 
Qué hace


El generador de border-radius te permite dar forma a las esquinas redondeadas de forma visual y copiar el CSS más corto. Usa un radio para todas las esquinas o uno por esquina, activa las esquinas elípticas para dar a cada una un radio horizontal y otro vertical, y observa cómo cambia la vista previa al arrastrar. Funciona en px, %, rem o em, y puedes pegar un valor border-radius existente para editarlo. Todo se ejecuta en tu navegador.


Cómo usarlo


    

  1. Empieza con un ajuste predefinido o conserva la forma de ejemplo.
    2. 

  2. Elige la Unidad. Al cambiarla se convierten los valores actuales (rem y em equivalen a 16px; % es relativo a la caja de la vista previa).
    3. 

  3. Activa Mismo radio en todas las esquinas para usar un solo deslizador, o desactívalo para ajustar Superior izquierda, Superior derecha, Inferior derecha e Inferior izquierda por separado.
    4. 

  4. Activa Esquinas elípticas para tener un deslizador Horizontal y otro Vertical por esquina.
    5. 

  5. Cambia el tamaño de la vista previa con Ancho y Alto y copia el código de la tarjeta CSS. Activa la salida longhand si prefieres cuatro propiedades separadas.
    6. 



Ejemplo


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Conviene saber


    

  • Forma más corta. La salida agrupa los valores iguales: cuatro esquinas idénticas se escriben con un solo valor y la parte tras la barra se omite cuando todas las esquinas son circulares.
    • 

  • Los porcentajes siguen a la caja. Los horizontales usan el ancho del elemento y los verticales su alto, así que 50% en un rectángulo da una elipse, no un círculo.
    • 

  • Los radios que no caben se reducen juntos en el navegador; por eso un valor enorme en px produce una píldora limpia.
    • 

  • Hijos y desbordamiento. Las esquinas redondeadas recortan el fondo y el borde, pero no el contenido hijo: añade overflow: hidden para recortar imágenes dentro de la caja.
    • 

 
  
 
Preguntas frecuentes
 
 
  › ¿Qué significa la barra en border-radius?  
Los valores antes de la barra son los radios horizontales y los de después, los verticales. Cuando difieren, la esquina se convierte en un cuarto de elipse en lugar de un círculo. Por ejemplo, 50% / 30% da una curva más plana que 50%.
 
  › ¿En qué orden se escriben las cuatro esquinas?  
En sentido horario desde arriba a la izquierda: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Con menos valores CSS los repite: dos valores fijan superior izquierda/inferior derecha y superior derecha/inferior izquierda; tres valores fijan superior izquierda, superior derecha/inferior izquierda e inferior derecha.
 
  › ¿Cómo hago un círculo o una píldora?  
border-radius: 50% convierte un cuadrado en círculo y un rectángulo en elipse. Para una píldora con extremos redondos a cualquier ancho, usa una longitud muy grande como 9999px: el navegador reduce los radios que no caben, así que los extremos siguen perfectamente redondos.
 
  › ¿Cómo se hacen las formas orgánicas (blob)?  
Los blobs usan ocho porcentajes distintos: cuatro radios horizontales y cuatro verticales, como 30% 70% 70% 30% / 30% 30% 70% 70%. Elige un ajuste predefinido de blob, activa Esquinas elípticas y arrastra los deslizadores de cada esquina para darle forma.