Generador de Radio de Borde CSS
Generador de radio de borde CSS es una herramienta gratuita en línea que le ayuda a crear esquinas perfectamente redondeadas para sus elementos HTML visualmente. En lugar de adivinar los valores de los píxeles, use controles interactivos para ajustar cada esquina de forma independiente o vincularlos para redondear de manera uniforme. La herramienta admite unidades de píxeles y porcentajes, ofrece formas preestablecidas (círculo, elipse, hoja, burbuja de diálogo) y muestra una vista previa en vivo de su elemento a medida que lo ajusta. Copie la propiedad CSS border-radius generada con todos los prefijos de proveedor al instante. Perfecto para crear interfaces de usuario de tarjetas modernas, avatares circulares, botones en forma de píldora y formas geométricas creativas.
Qué es
La propiedad CSS border-radius redondea las esquinas del borde exterior de un elemento. Es una de las propiedades CSS más utilizadas para crear interfaces modernas y visualmente atractivas. La propiedad border-radius puede tomar de 1 a 8 valores: -Valor único: borde-radio: 10 píxeles (las cuatro esquinas iguales) - Dos valores: radio del borde: 10 píxeles 20 píxeles (arriba a la izquierda / abajo a la derecha, arriba a la derecha/abajo a la izquierda) -Tres valores: radio del borde: 10px 20px 30px (arriba a la izquierda, arriba a la derecha / abajo a la izquierda, abajo a la derecha) -Cuatro valores: radio del borde: 10px 20px 30px 40px (arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda en el sentido de las agujas del reloj) - Ocho valores (elipse): borde-radio: 10px 20px 30px 40px / 50px 60px 70px 80px (radios horizontal / vertical para esquinas elípticas) Taquigrafía vs. longhand: - Radio del borde: 10 píxeles (taquigrafía, las cuatro esquinas) - radio superior izquierdo del borde: 10 píxeles (esquina individual) - borde-radio-superior-derecho: 20px - radio del borde inferior derecho: 30 píxeles - borde-inferior-izquierdo-radio: 40px Porcentaje frente a valores de píxeles: - radio del borde: 50% (crea un círculo / elipse en relación con las dimensiones del elemento) - radio del borde: 10 píxeles (valor de píxel fijo, no escala con el tamaño del elemento) - Para círculos, use un 50% en un elemento cuadrado - Para formas de pastillas, use 9999 px o 50% en elementos rectangulares Casos de uso comunes: - Imágenes circulares / avatares: 50% - Botones en forma de píldora: 9999 píxeles o 25% de altura - Esquinas de la tarjeta: 8-16px - Modales de diálogo: 8-12px -Formas de hoja/similares a hojas: valores de radio asimétricos La vista previa interactiva se ajusta a medida que modifica los valores de las esquinas, lo que le ayuda a visualizar el efecto al instante.
Cómo usar
- Elija su modo de ajuste: vincule todas las esquinas para un redondeo uniforme o desvincule para ajustar cada esquina de forma independiente. La herramienta muestra una representación visual de las cuatro esquinas (arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda).
- Arrastre los controles deslizantes o ingrese valores de píxeles para ajustar el radio de la esquina. Observe cómo se actualiza el elemento de vista previa en tiempo real a medida que cambia los valores. Utilice el modo de porcentaje para redondeo sensible o relativo a la forma.
- Habilite el modo elipse (avanzado) para establecer diferentes radios horizontales y verticales para cada esquina, creando esquinas elípticas en lugar de circulares. Esto permite formas orgánicas similares a gotas.
- Pruebe formas preestablecidas de la galería: círculo, elipse, hoja, flor, blob hablado, forma de pestaña y más. Al hacer clic en un ajuste preestablecido, se aplican instantáneamente los valores de radio de borde correspondientes a la vista previa.
- Compare el original con el redondeado alternando la vista previa entre los estados de esquinas afiladas y redondeadas. Esto te ayuda a ver la transformación exacta que producirá tu CSS.
- Copie el código CSS del radio del borde desde el panel salida. Tanto la taquigrafía (por ejemplo, border-radius: 10px 20px;) como las propiedades individuales (border-top-left-radius: etc.) se proporcionan.
Ejemplos
Entrada: TL:20px TR:20px BL:0 BR:0
Proceso: Apply asymmetric radius to corners
Resultado: border-radius: 20px 20px 0 0;
Entrada: All: 50%
Proceso: 50% on all corners creates circle/ellipse
Resultado: border-radius: 50%; (Creates circle)
Búsquedas Relacionadas
La gente también busca: generador de radio de borde, radio del borde css, esquinas redondeadas, radio de frontera.
generador de radio de borderadio del borde cssesquinas redondeadasradio de frontera
Preguntas Frecuentes
¿Cómo creo un círculo perfecto?
Para crear un círculo perfecto, el elemento debe ser un cuadrado (igual ancho y alto) y establecer border-radius: 50%. Para un avatar de 200x200 píxeles, use ancho: 200 píxeles; alto: 200 píxeles; radio del borde: 50%;. Si el elemento no es cuadrado, el 50% crea una elipse en lugar de un círculo. Para círculos sensibles sin dimensiones fijas, use relación de aspecto: 1; con ancho y radio de borde: 50%.
¿Cuál es el valor máximo del radio del borde?
No hay un valor máximo estricto para border-radius en CSS. Los valores superiores a la mitad del tamaño del elemento simplemente crean un efecto de redondeo completo. Para botones en forma de píldora, la práctica común es usar un valor muy grande como 9999px o 9999em; esto garantiza lados completamente redondeados independientemente de la altura del elemento. El uso del 50% crea esquinas elípticas (mitad de ancho, mitad de alto de radio), mientras que 9999 px crea más medias tapas circulares.
¿Puedo animar el radio del borde con transiciones CSS?
Sí, border-radius es animable. Puede realizar una transición sin problemas entre diferentes valores de radio de borde: .elemento { radio del borde: 0; transición: radio del borde 0,3 segundos de facilidad;}.elemento: hover { border-radius: 20px;}. Esto crea efectos de transformación suaves al pasar el mouse o cambiar de clase. La animación entre valores de porcentaje y píxeles funciona en los navegadores modernos, aunque es posible que la interpolación no siempre sea perfectamente fluida.
¿Por qué border-radius no funciona en mi mesa o imagen?
border-radius requiere que overflow: hidden (en el elemento primario) o las propiedades de visualización adecuadas sean visibles en ciertos elementos. Para las imágenes, el radio del borde recorta el contenido de la imagen. Para las tablas, es posible que necesite border-collapse: separate; para que border-radius funcione en las celdas de la tabla. Si las esquinas redondeadas no están visibles, verifique si el elemento tiene overflow:hidden aplicado en algún lugar recortando el efecto, o si border-radius está siendo anulado por selectores CSS más específicos.
¿Cómo creo una forma de hoja o gota orgánica?
Para las formas de las hojas, use valores asimétricos de radio de borde donde las esquinas opuestas tengan radios muy diferentes (por ejemplo, radio de borde: 0 100 píxeles 0 100 píxeles para una hoja horizontal). Para formas blob orgánicas, use la sintaxis de elipse de 8 valores con radios horizontales/verticales variables (por ejemplo, radio de borde: 30% 70% 70% 30% / 30% 30% 70% 70%). CSS puede crear formas blob suaves; combínelas con animación para obtener efectos blob interactivos.