Generador de CSS border-radius
Genera declaraciones CSS de border-radius personalizadas con valores independientes para cada esquina y unidades a medida.
Ejecutar herramienta
Este generador crea la declaración CSS border-radius para redondear las esquinas de cualquier contenedor web. Puedes definir un radio independiente para cada vértice: superior izquierdo, superior derecho, inferior derecho e inferior izquierdo. Si dejas los campos numéricos vacíos, el sistema aplica el valor predeterminado de 10 a cada esquina. También puedes indicar la unidad de medida que prefieras, como píxeles, porcentajes o unidades relativas; si no introduces ninguna unidad, se utiliza px por omisión. La herramienta combina los cuatro valores en el orden estándar que exige la especificación de hojas de estilo e interpola la unidad seleccionada junto a cada número. Con esta declaración lista para copiar, ajustas bordes simétricos para botones o diseños asimétricos para tarjetas e imágenes sin tener que escribir la sintaxis manualmente. El código generado se adapta con precisión a los valores que configuras en cada casilla del formulario.
Instrucciones
- Introduce el valor numérico para la esquina superior izquierda o conserva el valor predeterminado de 10.
- Asigna los valores deseados para la esquina superior derecha, inferior derecha e inferior izquierda.
- Escribe la unidad de medida que necesitas en el campo correspondiente, como px, rem o %.
- Ejecuta la herramienta para obtener la declaración de border-radius formateada con el orden estándar de las cuatro esquinas.
- Copia el fragmento generado e incorpóralo en tu archivo de estilos CSS.
Ejemplos
- Radio simétrico estándar: si mantienes los valores predeterminados (10 para cada esquina y unidad px), la herramienta genera la regla border-radius: 10px 10px 10px 10px;.
- Esquinas asimétricas con porcentajes: al ingresar 50 en la esquina superior izquierda, 20 en la superior derecha, 50 en la inferior derecha, 0 en la inferior izquierda y % como unidad, obtienes border-radius: 50% 20% 50% 0%;.
Preguntas frecuentes
¿En qué orden se colocan los valores en la regla CSS?
La propiedad border-radius sigue el sentido de las agujas del reloj: superior izquierda, superior derecha, inferior derecha e inferior izquierda.
¿Qué ocurre si dejo todos los campos vacíos?
El generador toma los valores predeterminados, asignando 10 a cada una de las cuatro esquinas y px como unidad de medida.
¿Se pueden utilizar valores iguales a cero?
Sí, puedes asignar 0 a cualquiera de las esquinas para mantener vértices rectos mientras redondeas el resto.
¿Qué unidades admite la herramienta?
Puedes ingresar cualquier unidad textual válida en CSS, como px, %, rem o em, y el texto indicado se añadirá a cada valor numérico.