Inicio / CSS y color / Generador de border-radius
Generador de border-radius
Cuatro controles, uno por esquina, con una forma en vivo para mirar. La regla generada se reduce a su forma corta cuando las cuatro esquinas coinciden, así que copias el CSS más limpio y no cuatro valores repetidos.
Cómo se usa
- Arrastra el control de cada esquina.
- Observa cómo toma forma la vista previa.
- Copia la regla de abajo.
Ejemplos
- Las cuatro a 16px → border-radius: 16px.
- Esquinas superiores redondeadas y las inferiores rectas dan una pestaña o cabecera de tarjeta.
- Una esquina a cero y el resto grandes da la forma de bocadillo.
Preguntas frecuentes
¿Qué hace un porcentaje?
Escala con el elemento en vez de quedarse fijo, así que un 50% en un cuadrado da un círculo perfecto y en un rectángulo una elipse. Los píxeles fijos mantienen la misma curvatura visual sea cual sea el tamaño.
¿Por qué se ve raro en un elemento pequeño?
Porque un radio mayor que la mitad del elemento lo recorta el navegador y las curvas vecinas se funden. Mantén el radio por debajo de la mitad del lado más corto o acepta la forma de píldora resultante.
Herramientas relacionadas
Actualizado: 2026-08-07