Generador de border-radius
Da forma a las cuatro esquinas por separado, enlázalas y copia la regla CSS.
100% privado: todo funciona en tu navegador
Cómo usarla
- 1
Escribe un radio por esquina o activa Enlazar las cuatro esquinas.
- 2
Elige un preset o pega un border-radius existente para editarlo.
- 3
Copia el CSS generado y úsalo en tu hoja de estilos.
Ejemplos
Tarjeta redondeada
Entrada
16px en las cuatro esquinasSalida
border-radius: 16px;Solo arriba
Entrada
16px 16px 0 0Salida
border-radius: 16px 16px 0 0;Preguntas frecuentes
¿Cómo hago un círculo?
Con un elemento cuadrado y las cuatro esquinas al 50%; el preset Círculo lo hace por ti.
¿Pueden ser distintas?
Sí, cada esquina acepta su propio valor, incluso pares elípticos como 40% 20%.
¿Hay un máximo?
Cualquier longitud vale, pero el navegador limita por encima de la mitad del elemento.
Herramientas relacionadas
Generador de sombras CSSDiseña un box-shadow de CSS con controles en vivo, presets y vista previa, y copia la regla lista.Generador de DegradadosCrea degradados CSS lineales y radiales visualmente y copia el código CSS.Generador de Colores CSSConvierte un color base en una escala de 10 tonos y expórtala como variables CSS.Formateador JSONFormatea, embellece, minimiza y valida JSON al instante, en tu navegador.Validador JSONValida JSON al instante y localiza los errores de sintaxis con línea, columna y posición exactas, directamente en tu navegador.Codificador/Decodificador Base64Codifica texto a Base64 y decodifica Base64 a texto: compatible con Unicode y emoji, 100 % en tu navegador.