Generador de border-radius
Redondea las esquinas de una caja con un control o con ocho valores. Cambia entre px y porcentaje, previsualiza la forma y copia la regla border-radius.
Controles de esquinas
CSS generado
border-radius: 12px;Qué hace border-radius
border-radius redondea las esquinas de un elemento. Un solo valor afecta a las cuatro esquinas, cuatro valores se aplican en sentido horario desde arriba a la izquierda, y una barra separa el radio horizontal del vertical, que es lo que convierte esquinas simples en formas orgánicas.
La vista previa y la declaración que copias salen del mismo valor, así que lo que ves es exactamente lo que llega a tu hoja de estilos.
Cómo crear esquinas redondeadas
- Deja activado Vincular las cuatro esquinas y arrastra el control para redondearlas por igual.
- Desactiva el vínculo para ajustar arriba izquierda, arriba derecha, abajo derecha y abajo izquierda por separado.
- Cambia a porcentaje para que la forma escale con el elemento; un 50% en un cuadrado da un círculo.
- Marca Avanzado (8 valores) para dar a cada esquina su radio horizontal y vertical, y copia la regla border-radius.
Ejemplos de border-radius
Tarjeta redondeada
12px en las cuatro esquinas
border-radius: 12px;
Círculo
50% en las cuatro esquinas
border-radius: 50%;
Forma orgánica
30% 70% 70% 30% / 30% 30% 70% 70%
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
UrsaKit frente a otros generadores de border-radius
| Criterio | UrsaKit | border-radius.com | cssgenerator.org | 9elements Fancy |
|---|---|---|---|---|
| Precio | Gratis | Gratis | Gratis con anuncios | Gratis |
| Controles en lugar de escribir | Sí | No | Parcial | Parcial |
| Unidades px y porcentaje | Sí | Parcial | No | Parcial |
| Sintaxis de ocho valores | Sí | No | No | Sí |
| Formas de ejemplo | Sí | No | No | No |
| Sube algún dato | No | No | No | No |
Preguntas frecuentes
¿Qué diferencia hay entre un valor y cuatro?
Un valor se aplica a las cuatro esquinas. Cuatro valores se aplican en sentido horario empezando arriba a la izquierda: arriba izquierda, arriba derecha, abajo derecha y abajo izquierda.
¿Qué significa la parte después de la barra?
Define el radio vertical por separado del horizontal, así que 30% 70% 70% 30% / 30% 30% 70% 70% da a cada esquina su propia elipse en lugar de un cuarto de círculo.
¿Con respecto a qué se calculan los porcentajes?
El ancho de la caja para los radios horizontales y la altura para los verticales, por eso un 50% en un cuadrado produce un círculo perfecto.
¿Cómo hago un botón tipo píldora?
Usa un radio de al menos la mitad de la altura del elemento, por ejemplo 100px o 999px en un botón normal.
¿Puedo redondear solo una esquina?
Sí. Desactiva el vínculo y arrastra el control de esa esquina; las otras tres se quedan como están.
¿Se sube algo?
No. El valor se construye en tu navegador y no se envía nada a ningún servidor.