toolsmoah

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
    Generador de Border-Radius | toolsmoah