Generador Border Radius CSS Gratis: Esquinas Redondeadas Visual
32 usos20px
20px
20px
20px
Consejos Border Radius
Esquinas individuales
Ajusta cada esquina por separado (superior izquierda, derecha, inferior derecha, izquierda) o enlázalas para un radio uniforme.
Enlazar esquinas
Activa enlazar para que las cuatro esquinas cambien juntas. Desactiva para control individual.
Código CSS
border-radius se genera con la abreviación correcta. Copia y pega.
Preguntas frecuentes
¿Cómo redondear esquinas en CSS?
border-radius: Xpx; para todas iguales, o border-radius: TL TR BR BL; para cada esquina por separado.
¿Cómo hacer un círculo?
border-radius: 50% convierte un elemento cuadrado en un círculo perfecto.
¿Puedo hacer esquinas diferentes?
Sí, cada esquina tiene su propio valor: border-top-left-radius, border-top-right-radius, etc.
¿Qué hace el botón 'desvincular'?
Al hacer clic en el botón 'desvincular', se desconectan los controles de cada esquina. Esto significa que puedes ajustar el radio de una esquina sin afectar a las demás. Verás que los cuatro campos de entrada se vuelven independientes. Es útil para crear diseños asimétricos.
¿Puedo usar valores porcentuales en lugar de píxeles?
Sí, puedes cambiar entre píxeles y porcentajes en el generador. Los porcentajes son relativos a las dimensiones del elemento, no al radio en sí. Un valor de 50% en una caja de 200px de ancho crea un radio de 100px en las esquinas. Esto importa sobre todo en diseños responsivos donde el tamaño del elemento cambia. Usa porcentajes cuando tu diseño necesite escalar de forma fluida entre pantallas.
Cómo Usar
- Ajusta el radio de cada esquina
- Activa/desactiva enlazar esquinas
- Vista previa en tiempo real
- Copia el código CSS