Cómo usar: Generador de Border Radius
- Arrastra el control para redondear las cuatro esquinas, o elige Cada esquina para definir arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda por separado.
- Cambia la unidad:
pxpara un redondeo fijo,%para que escale con el elemento (50% en un cuadrado genera un círculo). - Elige Elíptica o Blob aleatorio para formas orgánicas con 8 valores.
- Copia el CSS: se acorta a la menor cantidad de valores que producen la misma forma.
Cómo funcionan los valores de border-radius
| CSS | Esquinas |
|---|---|
border-radius: 12px | las cuatro |
border-radius: 12px 4px | arriba a la izquierda y abajo a la derecha, arriba a la derecha y abajo a la izquierda |
border-radius: 12px 8px 4px 0 | arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda (en sentido horario) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elíptica: radios horizontales / radios verticales — formas blob |
Botones tipo píldora: usa un valor grande como 9999px. El navegador lo limita a la mitad de la altura, así que los extremos siempre quedan redondos, sin importar el tamaño. Círculos: 50% en un elemento cuadrado. Los porcentajes se calculan respecto al ancho de la caja (radios horizontales) y a su alto (radios verticales).
Relacionado: Generador de Box Shadow, Generador de Gradientes CSS, Generador de Glassmorphism.
También se busca como: generador border radius, border radius css, esquinas redondeadas css, generador border-radius, generador blob css, border radius online, bordes redondeados css, forma blob css.
Herramientas que combinan con: Generador de Border Radius
- Generador de CSS Grid — Define las columnas, filas y gap, y luego arrastra sobre las celdas para crear áreas como header, sidebar y main.
- Generador de filtros CSS — Ajusta blur, brillo, contraste, saturación, tono, escala de grises, sepia, invertir y sombra paralela sobre una imagen de ejemplo o la tuya y copia el CSS de filter.
- Generador Cubic Bezier — Da forma a una curva de easing arrastrando dos puntos y compárala con los easings estándar.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Cómo hago esquinas redondeadas en CSS?
Usa border-radius, por ejemplo border-radius: 12px para todas las esquinas, o cuatro valores para arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda.
¿Cómo hago un botón con forma de píldora?
Define border-radius con un valor grande como 9999px. El navegador lo limita a la mitad de la altura, así que los extremos siempre quedan perfectamente redondos.
¿Cómo hago un círculo?
Dale al elemento el mismo ancho y alto, y border-radius: 50%.
¿Qué significa la barra en border-radius?
Los valores antes de la barra son radios horizontales y los de después son radios verticales, así que cada esquina se convierte en una elipse. Así se crean las formas blob.
¿Puedo instalar Generador de Border Radius como aplicación web y utilizarla sin conexión?
Sí. Generador de Border Radius es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.