Generador de border-radius CSS con vista previa
Redondea esquinas visualmente y copia el CSS. Control por esquina, radios elípticos, px o %, presets de píldora a blob y vista previa en vivo.
Cargando Generador de border-radius CSS con vista previa… Si no ocurre nada, activa JavaScript.
La propiedad CSS border-radius redondea las esquinas de un elemento y es una de las pocas propiedades que cambia el carácter de toda una interfaz. Los botones resultan más amables con 8 píxeles de redondeo, las tarjetas parecen modernas entre 12 y 16, los avatares se convierten en círculos al 50 por ciento y las etiquetas se vuelven píldoras cuando el radio supera la mitad de la altura. Este generador te permite ajustar esos valores con deslizadores y campos numéricos mientras ves el resultado al instante, y después copiar una sola línea de CSS para pegarla en tu hoja de estilos. Sin registro, sin paso de exportación y sin que nada salga de tu navegador.
Preguntas frecuentes
¿Cómo hago un círculo con border-radius?
¿Qué es la barra en un valor de border-radius?
¿Debo usar píxeles o porcentajes?
¿En qué orden se aplican los cuatro valores?
¿Por qué mi radio se ve más pequeño que el valor que puse?
¿border-radius recorta el contenido interior del elemento?
¿El CSS es compatible con navegadores antiguos?
¿Puedo usarlo en imágenes y botones?
¿Se sube algo a un servidor?
Acerca de Generador de border-radius CSS con vista previa
border-radius da mucho más de sí de lo que la mayoría aprovecha. Cada una de las cuatro esquinas puede configurarse por separado, y así se consiguen formas de hoja, bocadillos de diálogo, entradas de cine y tarjetas asimétricas. Cada esquina puede además ser elíptica en lugar de circular, es decir, aceptar un radio horizontal y otro vertical, escritos con una barra: border-radius: 60px 20px 60px 20px / 30px 60px 30px 60px. Esa sintaxis con barra es la que produce aquí el interruptor "Esquinas elípticas", y es el truco detrás de las formas orgánicas tipo blob que aparecen en las landing pages modernas. El preset "Blob" genera un conjunto aleatorio de ocho valores para que puedas ir probando hasta que algo te encaje.
La elección entre píxeles y porcentajes importa más de lo que parece. Un radio en píxeles es absoluto: 20px son 20px tanto en una insignia pequeña como en un panel ancho. Un radio en porcentaje es relativo a las dimensiones del propio elemento, en horizontal a su ancho y en vertical a su alto, así que 50% siempre produce una elipse perfecta y una forma definida en porcentajes conserva sus proporciones al cambiar de tamaño el elemento. Por eso los avatares suelen usar 50% y los botones un valor fijo en píxeles. Usa el conmutador de unidad para ver la diferencia: redimensiona la caja de vista previa con los deslizadores de ancho y alto y observa cómo una forma en porcentaje se adapta mientras una en píxeles no.
Todo se dibuja en tu navegador con el mismo motor CSS que renderizará tu sitio, así que la vista previa no es una aproximación, es lo real. Usa el fondo de cuadros para juzgar las formas sobre transparencia, activa el fondo de imagen para ver cómo recortan las esquinas una fotografía y copia el CSS cuando esté a tu gusto. Si introduces un radio mayor de lo que el elemento puede acomodar, los navegadores reducen todos los radios de forma proporcional en lugar de solaparlos, y por eso un valor en píxeles muy grande sobre una caja baja produce una píldora limpia en vez de una forma rota.
La larga batalla de las esquinas redondeadas
Las esquinas redondeadas fueron una obsesión del diseño mucho antes de que el CSS pudiera producirlas. En 1981, mientras construía el primer Macintosh, Bill Atkinson escribió rutinas rápidas para dibujar círculos y óvalos, pero se resistía a añadir rectángulos redondeados porque las matemáticas le parecían demasiado lentas. Steve Jobs lo llevó a dar una vuelta a la manzana señalando rectángulos redondeados en señales de tráfico y ventanillas de coche hasta que Atkinson cedió; las rutinas RoundRects resultantes definieron el aspecto de la interfaz del Mac y, por extensión, de la informática gráfica.
En la web la espera fue larga. A principios de los 2000, una caja redondeada significaba cortar un diseño en imágenes de esquina con Photoshop y recomponerlas con divs anidados, un método tan común que tenía nombre: la técnica de las puertas deslizantes. Algunos desarrolladores generaban esquinas con tablas, otros con librerías JavaScript que las dibujaban en tiempo de ejecución. border-radius se propuso para CSS3 y llegó primero tras prefijos de proveedor, como -moz-border-radius en Firefox en 2005 y luego -webkit-border-radius en Safari, así que las hojas de estilo reales arrastraron tres copias de cada declaración de esquina durante años. Internet Explorer solo lo admitió en la versión 9, publicada en 2011, y ese fue el momento en que la mayoría de los equipos borró por fin sus imágenes de esquina.
La discusión visual nunca terminó del todo, solo se trasladó. Las propias formas de los iconos de Apple pasaron de esquinas circulares simples a un squircle, una superelipse cuya curvatura cambia de forma continua en vez de saltar del borde recto al arco, porque la unión resulta más suave a la vista. Los diseñadores llevan persiguiendo ese efecto en CSS desde entonces, con radios elípticos, trazados SVG y ahora la propiedad experimental corner-shape. Mientras tanto el péndulo del gusto sigue oscilando: la era del diseño plano de mediados de los 2010 recortó los radios casi a cero, y la preferencia actual por interfaces suaves y amables los ha vuelto a agrandar. La propiedad es una sola línea de CSS, pero el número que se le pone lleva cuarenta años en discusión.