Generador de Border Radius CSS
Generador visual de border-radius CSS. Ajusta cada esquina de forma independiente con vista previa en tiempo real y copia el código CSS al instante.
¿Qué es CSS border-radius?
CSS border-radius es una propiedad que redondea las esquinas del borde exterior de un elemento. Puede configurar cada esquina de forma independiente usando uno a cuatro valores, o controlar cada esquina individualmente con propiedades como border-top-left-radius.
¿Cómo hago un círculo perfecto con border-radius?
Establezca border-radius al 50% en un elemento cuadrado (ancho y alto iguales). Esto crea un círculo perfecto. Para una elipse, use border-radius: 50% en un elemento rectangular.
¿Qué unidades puedo usar para border-radius?
Border-radius acepta px, %, em, rem, vw, vh y otras unidades de longitud CSS. Los porcentajes son relativos a las dimensiones del elemento, mientras que las unidades absolutas como px proporcionan valores fijos.
¿Cuál es la sintaxis abreviada de border-radius?
La abreviatura sigue el patrón: arriba-izquierda arriba-derecha abajo-derecha abajo-izquierda. Un valor se aplica a todas las esquinas. Dos valores establecen arriba-izquierda/abajo-derecha y arriba-derecha/abajo-izquierda.
¿Puedo crear esquinas elípticas?
Sí, usando la sintaxis de barra (/) puede definir radios horizontales y verticales separados. Por ejemplo, border-radius: 50% / 100px crea una curva elíptica con diferentes radios horizontales y verticales.
¿Border-radius funciona en todos los elementos?
Border-radius funciona en la mayoría de los elementos HTML incluyendo div, button, img e input. Sin embargo, puede no recortar contenido desbordado en elementos sin overflow: hidden.
¿Puedo crear formas complejas con border-radius?
Sí, combinando diferentes valores de radio para cada esquina, puede crear píldoras, óvalos, hojas y formas orgánicas personalizadas. Los valores porcentuales funcionan bien para diseños responsivos.
¿Border-radius es compatible con todos los navegadores?
Sí, border-radius es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari, Edge y navegadores móviles. Ha sido parte de CSS3 desde 2011 con excelente compatibilidad.
¿Cómo hago un botón en forma de píldora?
Establezca border-radius a un valor igual o mayor que la mitad de la altura del elemento. Para un botón de 40px de alto, use border-radius: 20px o mayor para crear una forma de píldora.
¿Border-radius afecta las imágenes de fondo?
Sí, border-radius recorta el fondo, la imagen de fondo y el borde de un elemento. El fondo sigue automáticamente las esquinas redondeadas.
¿Puedo animar border-radius?
Sí, border-radius es animable con transiciones y animaciones CSS. Puede transicionar suavemente entre diferentes valores de radio para efectos interactivos de hover y clic.
¿Puedo usar border-radius con transformaciones CSS?
Sí, border-radius funciona bien con transformaciones CSS como rotate, scale y translate. Las esquinas redondeadas se transformarán junto con el elemento.
¿Cómo creo un círculo con borde?
Aplique border-radius: 50% a un elemento cuadrado con ancho y alto iguales, luego agregue una propiedad border. El borde seguirá la forma circular.
¿Cuál es la diferencia entre propiedades individuales y abreviatura?
Las propiedades individuales como border-top-left-radius le dan control preciso sobre cada esquina. La abreviatura border-radius le permite configurar múltiples esquinas en una sola declaración. Ambas producen la misma salida CSS.
Cómo usar Generador de Border Radius CSS
Diseña esquinas redondeadas visualmente con este generador de CSS border-radius. Se ejecuta por completo en tu navegador y no se sube ningún dato.
- Elige px, %, em o rem en el desplegable Unit.
- Arrastra los deslizadores Top Left, Top Right, Bottom Right y Bottom Left para redondear cada esquina por separado.
- Activa Link all corners para aplicar el mismo valor a las cuatro esquinas a la vez.
- Copia el CSS generado desde la vista previa y pégalo en tu hoja de estilos.
Con el 50 % en las cuatro esquinas obtienes un círculo o píldora perfecta; usa em o rem para que el radio escale con tu tipografía.
Herramientas relacionadas
- Generador de Box Shadow CSS Generador online gratuito de box-shadow CSS. Crea sombras hermosas visualmente con desplazamiento, desenfoque, extensión, color e inset ajustables. Vista previa en vivo y copia instantánea.
- Generador de Gradientes CSS Crea impresionantes gradientes CSS visualmente. Genera gradientes lineales, radiales y cónicos con múltiples paradas de color, ángulos y posiciones. Copia código CSS listo para producción.
- Generador CSS Grid Generador visual gratuito de CSS Grid con vista previa en vivo. Diseña cuadrículas responsivas interactivamente y exporta código CSS listo para producción.
- Generador CSS Flexbox Generador visual CSS Flexbox con vista previa en vivo. Ajusta propiedades flex y obtén código CSS listo para usar.
- Generador de Border Radius Creativo Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Easing CSS Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
- Generador de Text Shadow CSS Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.