Los resultados se ofrecen solo con fines informativos y pueden contener errores. Verifica la información importante de forma independiente. El uso de esta herramienta es bajo tu propia responsabilidad.
Qué hace esta herramienta
El Generador de Border-Radius CSS te permite redondear cada esquina de una caja por separado con cuatro controles deslizantes, de 0 a 100 píxeles, y ver la forma en una vista previa en tiempo real. El resultado es una única declaración border-radius que puedes pegar en tu hoja de estilos. Las cuatro esquinas empiezan en 20px.
Los valores se escriben en el orden que espera CSS: superior izquierda, superior derecha, inferior derecha, inferior izquierda, en el sentido de las agujas del reloj desde la esquina superior izquierda. Con valores iguales obtienes una tarjeta redondeada de forma uniforme; con valores distintos, bocadillos de diálogo, pestañas, formas de hoja y otros diseños asimétricos. La forma abreviada funciona en todos los navegadores actuales sin prefijos.
Cuándo usarla
- Dar estilo a tarjetas, botones y campos de formulario para que coincidan con el radio de esquina de un sistema de diseño.
- Redondear solo las esquinas superiores de una pestaña o las inferiores de un desplegable.
- Crear una forma de bocadillo de chat con una esquina en punta.
- Probar distintos radios rápidamente en lugar de editar el CSS y recargar.
Ejemplo práctico
Entrada
Superior izquierda 24, superior derecha 24, inferior derecha 4, inferior izquierda 24Salida
border-radius: 24px 24px 4px 24px;Preguntas sobre esta herramienta
¿Cómo hago un círculo perfecto?
Aplica border-radius: 50% a un elemento cuadrado. Un porcentaje es relativo al tamaño del elemento, así que sigue siendo redondo con cualquier ancho. Un botón en forma de píldora, en cambio, usa un valor grande en píxeles, como 999px.
¿Por qué el fondo se sale de las esquinas redondeadas?
Los elementos hijos con fondo propio pueden pintar por encima de las esquinas. Añade overflow: hidden al padre redondeado o da al hijo el mismo radio.
¿Una esquina puede ser elíptica?
Sí. CSS acepta dos radios por esquina separados por una barra, como border-radius: 50px / 25px. El generador escribe la forma circular habitual; edita el resultado para añadir el segundo valor.
¿border-radius también afecta a la sombra?
Sí. Un box-shadow sigue el contorno redondeado, así que las esquinas coinciden. Crea la sombra con el Generador de Sombras CSS y combina las dos declaraciones.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.