Generador de border-radius CSS
Da forma a cualquier caja con border-radius: arrastra los tiradores o los controles de cada esquina, cambia a la sintaxis avanzada de 8 valores para esquinas elípticas y blobs orgánicos, y copia el CSS. Todo funciona en tu navegador.
Última actualización:
Arrastra los tiradores redondos sobre la forma (o selecciona uno y usa las teclas de flecha).
Esquinas
Cómo usar Generador de border-radius CSS
- Elige un modo: Simple para un radio por esquina, o Avanzado para radios horizontales y verticales separados.
- Elige una unidad (px o %) y mueve los controles, o arrastra los tiradores redondos sobre la propia forma.
- Prueba un ajuste predefinido como Píldora o Gota, o pulsa Blob aleatorio hasta que te guste la forma orgánica.
- Ajusta el tamaño de la vista previa para que coincida con tu elemento, porque los porcentajes y los radios grandes dependen de él.
- Pulsa Copiar CSS y pega la regla border-radius en tu hoja de estilos.
Chuleta de la forma abreviada de border-radius
| Escribes | Superior izquierda | Superior derecha | Inferior derecha | Inferior izquierda |
|---|---|---|---|---|
10px | 10px | 10px | 10px | 10px |
10px 20px | 10px | 20px | 10px | 20px |
10px 20px 30px | 10px | 20px | 30px | 20px |
10px 20px 30px 40px | 10px | 20px | 30px | 40px |
50% / 25% | 50% × 25% | 50% × 25% | 50% × 25% | 50% × 25% |
Las propiedades individuales son border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius. Cada una acepta un valor (una esquina circular) o dos valores separados por un espacio (horizontal y luego vertical) para una esquina elíptica. Ten en cuenta que el orden es distinto al de la forma abreviada: en la forma individual los dos valores se separan con un espacio, no con una barra.
Ejemplo práctico: cómo se escalan los radios que se solapan
Toma una caja de 200px de ancho y 100px de alto con border-radius: 80px. En los lados de 100px, los radios superior e inferior suman 160px, que es más de 100px. CSS calcula un factor para cada lado (longitud del lado ÷ suma de sus dos radios) y aplica el menor a todos los radios: 100 ÷ 160 = 0.625, así que cada esquina se dibuja a 80 × 0.625 = 50px. El resultado es una píldora, exactamente igual que border-radius: 50px. Por eso valores muy grandes como 9999px producen siempre formas de píldora.
Formas populares con border-radius
| Forma | CSS | Nota |
|---|---|---|
| Círculo | border-radius: 50% | El elemento debe ser cuadrado |
| Elipse | border-radius: 50% | En un rectángulo |
| Píldora / cápsula | border-radius: 9999px | Funciona con cualquier ancho |
| Pestaña | border-radius: 12px 12px 0 0 | Redondeada solo arriba |
| Hoja | border-radius: 0 70% | Dos esquinas opuestas |
| Gota / pin | border-radius: 50% 50% 50% 0 | Gírala 45° o -45° para orientarla |
| Huevo | border-radius: 50% / 60% 60% 40% 40% | Funciona mejor si es más alta que ancha |
| Blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% | Anima entre dos blobs para un efecto de "transformación" |
Consejo: para animar un blob que cambia de forma, pon dos radios de 8 valores distintos en @keyframes y deja que border-radius haga la transición entre ellos. Combínalo con una sombra suave del generador de box-shadow y luego ordena tu hoja de estilos con el formateador de CSS.
Preguntas frecuentes
¿Cómo funciona la forma abreviada de border-radius?
Con un valor, las cuatro esquinas son iguales. Dos valores fijan superior izquierda e inferior derecha, y luego superior derecha e inferior izquierda. Tres valores fijan superior izquierda, luego superior derecha e inferior izquierda, y luego inferior derecha. Cuatro valores van en el sentido de las agujas del reloj desde arriba a la izquierda: superior izquierda, superior derecha, inferior derecha, inferior izquierda.
¿Qué significa la barra en border-radius?
Los valores antes de la barra son radios horizontales y los de después son radios verticales, lo que convierte cada esquina en un cuarto de elipse. Por ejemplo, border-radius: 50% / 30% da a cada esquina una curva de 50% de ancho y 30% de alto. Esta sintaxis de 8 valores es la que se usa para crear formas blob en CSS.
¿Debo usar px o % en border-radius?
Usa px cuando quieras el mismo redondeo visible sea cual sea el tamaño, como 8px en tarjetas y botones. Usa % cuando la forma deba escalar con el elemento: 50% en un cuadrado crea un círculo. Los porcentajes horizontales son relativos al ancho y los verticales al alto.
¿Cómo hago un círculo perfecto o una píldora?
Para un círculo, usa un elemento cuadrado (mismo ancho y alto) con border-radius: 50%. Para una forma de píldora en un elemento de cualquier ancho, usa un radio en píxeles de al menos la mitad del alto, a menudo escrito como 9999px, para que los extremos queden totalmente redondos.
¿Por qué mi radio se ve más pequeño que el valor que puse?
Cuando dos radios contiguos suman más que la longitud de ese lado, el navegador reduce todos los radios por el mismo factor para que las curvas nunca se solapen. La herramienta te avisa cuando eso ocurre.
¿Cómo creo una forma blob con CSS?
Cambia al modo Avanzado con unidades % y da a cada esquina radios horizontales y verticales distintos, manteniendo cada pareja de un lado en un 100% en total para obtener curvas suaves, por ejemplo 30% 70% 70% 30% / 30% 30% 70% 70%. El botón Blob aleatorio los genera por ti.
¿border-radius recorta el contenido interior?
Recorta el fondo y el borde del elemento. Los elementos hijos y las imágenes pueden seguir sobresaliendo de las esquinas redondeadas; añade overflow: hidden (u overflow: clip) al elemento para recortar también su contenido.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.