Generador de radio de borde CSS
Redondea las esquinas exactamente como quieras — desde tarjetas sutiles hasta manchas juguetonas.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo establecer un radio de borde CSS
- Establecer las esquinas — juntos o uno por uno.
- O cambie al modo blob y arrastre los controles.
- Copie la clase CSS o Tailwind.
Acerca de Generador de border-radius
Cree valores de radio de borde CSS visualmente.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Tarjetas, botones y avatares
- Fondos de burbuja orgánica
- Burbujas de discurso, pestañas y hojas
Consejo: Los porcentajes escalan con el elemento; px mantiene la misma curva en cualquier tamaño.
Preguntas frecuentes
¿Cómo hago una forma de blob?
Cambie a “Fancy blob shape”, arrastre los 4 mangos a lo largo de los bordes (o use los controles deslizantes) o presione Random blob. Esto usa la sintaxis de barra: radios horizontales / radios verticales.
¿Cómo hago un círculo o una píldora?
Un círculo es border-radius: 50% en un elemento cuadrado; una píldora es un radio muy grande (como 999px) en un elemento ancho. Ambos son presets.
¿Qué significan los 4 valores?
Van en el sentido de las agujas del reloj desde la esquina superior izquierda: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda.
¿Qué unidad debo usar?
Píxeles para esquinas fijas, % para escalar con el elemento (50% convierte un cuadrado en un círculo), o rem para seguir el tamaño de la fuente.
¿Por qué las esquinas de mi imagen no son redondeadas?
Ponga el radio en la imagen en sí, o en su contenedor junto con el desbordamiento: oculto, por lo que la imagen se recorta a las esquinas redondeadas.