Generador de Border-Radius
Crea y previsualiza visualmente las propiedades CSS de border-radius.
CSS Generado
Ajusta la redondez de cada esquina
Vista Previa
Previsualiza el efecto border-radius generado
Vista Previa
CSS Generado
border-radius: 20px;Ejemplos
Haz clic en los estilos de border-radius predefinidos para aplicarlos
Propiedades de Border-Radius
Orden de Propiedades
La propiedad border-radius se aplica en sentido horario: superior-izquierda → superior-derecha → inferior-derecha → inferior-izquierda
Propiedades Abreviadas
- •
border-radius: 10px;- Se aplica a las cuatro esquinas - •
border-radius: 10px 20px;- La primera se aplica a superior-izquierda e inferior-derecha, la segunda a superior-derecha e inferior-izquierda - •
border-radius: 10px 20px 30px;- La primera se aplica a superior-izquierda, la segunda a superior-derecha e inferior-izquierda, la tercera a inferior-derecha - •
border-radius: 10px 20px 30px 40px;- Se aplica a superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda en orden
Consejos de Uso
- • Usa 50% para crear un círculo perfecto
- • 4-8px suele ser bueno para botones
- • 8-16px es común para tarjetas y paneles
- • El radio asimétrico puede crear efectos de diseño únicos