Generador de border-radius

Convierte un elemento cuadrado en un círculo perfecto. Para obtener un círculo verdadero, el elemento debe tener igual anchura y altura — por ejemplo `width: 100px; height: 100px; border-radius: 50%`. El radio del 50% se encuentra en el centro de los cuatro lados, creando una curva perfecta. En un elemento no cuadrado, el 50% crea una elipse en su lugar — más ancha que alta o más alta que ancha, dependiendo de las dimensiones del elemento. Es la forma más común de crear imágenes de avatar circulares, botones redondos y contenedores de iconos en CSS.

Usa `border-radius: 9999px` (o cualquier valor muy grande como 100px) en un elemento no cuadrado como un botón o una etiqueta. El navegador automáticamente limita el radio a la mitad de la dimensión más corta del elemento, por lo que los extremos cortos se convierten en semicírculos perfectos mientras los lados largos permanecen rectos. Esto crea el clásico botón CTA con forma de píldora que se ve en la mayoría de los sistemas de diseño modernos. El truco de `9999px` funciona independientemente del tamaño del elemento — no es necesario calcular manualmente la mitad de la altura. El preset Píldora de este generador aplica este patrón al instante.

Los valores en píxeles son absolutos — un radio de `12px` permanece en 12 píxeles independientemente del tamaño del elemento. Si el elemento escala hacia arriba o hacia abajo, el tamaño de la esquina se mantiene fijo. Los valores en porcentaje son relativos — `50%` siempre se curva hasta el punto exacto medio de cada lado, produciendo una forma proporcional que escala con el elemento. Usa porcentaje (`50%`) para formas como círculos y píldoras que deben escalar con el elemento. Usa píxeles para componentes de UI como tarjetas, botones y campos de entrada donde quieras un tamaño de esquina consistente definido por el sistema de diseño independientemente del contenido.

Un `border-radius` estándar solo curva las esquinas hacia afuera (convexo). Para una esquina invertida o cóncava — la curva de 'muesca' o 'recorte' hacia adentro usada en tickets, pestañas y globos de diálogo — no puedes usar `border-radius` solo. La técnica más común es una máscara de degradado radial: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, repetida para cada esquina que quieras hacer morder hacia adentro. Una alternativa es un pseudoelemento posicionado (`::before`) pintado con el color de fondo de la página y con su propio `border-radius` convexo, superpuesto sobre la esquina para que aparezca cortarla cóncavamente. Para bordes de talonario de ticket, una máscara de degradado radial repetida a lo largo de un lado produce la perforación festoneada. Así que el 'border-radius invertido' es en realidad un truco de enmascaramiento más que un valor de border-radius — útil de saber cuando buscas un generador de border-radius invertido en CSS.

Usa las propiedades de esquina individuales: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, o `border-bottom-left-radius`. Por ejemplo, `border-bottom-right-radius: 24px` redondea solo la esquina inferior derecha, dejando las otras tres angulares. Puedes combinarlas libremente: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` crea una forma redondeada diagonalmente. En la abreviatura, dos valores establecen pares de esquinas opuestas: `border-radius: 16px 0` redondea las esquinas superior izquierda e inferior derecha, dejando superior derecha e inferior izquierda angulares.

En sentido horario desde la esquina superior izquierda: Superior izquierda → Superior derecha → Inferior derecha → Inferior izquierda. Por lo tanto, `border-radius: 16px 8px 0 8px` da a la superior izquierda 16px, superior derecha 8px, inferior derecha 0 e inferior izquierda 8px. Esto coincide con la dirección de abreviatura CSS estándar utilizada por `margin`, `padding` y `border-width`. Con dos valores, el primero se aplica a superior izquierda e inferior derecha; el segundo a superior derecha e inferior izquierda. Con tres valores, el segundo se aplica tanto a superior derecha como a inferior izquierda. Un valor se aplica uniformemente a las cuatro esquinas.

Sí — aplica `border-radius` directamente al elemento `<img>`: `img { border-radius: 50%; width: 100px; height: 100px; }` para un avatar circular. Alternativamente, envuelve la imagen en un `<div>` con `overflow: hidden` y aplica border-radius al contenedor, lo que te da más control de maquetación. Usa la función de carga de imagen de esta herramienta para previsualizar cómo se ve tu radio en tu foto real antes de copiar el CSS. Esto es especialmente útil para recortes de avatar, miniaturas de tarjetas de medios y maquetaciones de galería donde la forma exacta del recorte afecta el diseño.

Establece tres esquinas en un valor grande y deja una en cero: `border-radius: 50% 50% 50% 0`. Combinado con `transform: rotate(-45deg)`, esto crea la clásica forma de pin de mapa. Ajusta qué esquina está en cero para apuntar la gota en diferentes direcciones: `0 50% 50% 50%` apunta a la izquierda, `50% 0 50% 50%` apunta a la derecha. La esquina en cero crea la punta; las tres esquinas con radio grande forman el cuerpo redondeado. Útil para marcadores de ubicación, punteros y acentos decorativos en UIs de estilo ilustración.

La barra separa los radios horizontales y verticales para cada esquina. La sintaxis es: `border-radius: [radios horizontales] / [radios verticales]`. Por ejemplo, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` crea una forma similar a un huevo donde cada esquina tiene una curva elíptica asimétrica. El generador de Blob Aleatorio de esta herramienta usa esta sintaxis para producir formas orgánicas y asimétricas — populares para fondos de sección hero, blobs decorativos y elementos de diseño de estilo ilustración. Cada esquina puede tener una relación diferente de radio horizontal a vertical.

La herramienta de border-radius de cssmatic.com es funcional pero anticuada — carece de carga de imágenes, generación de blobs y una biblioteca de presets. El almanaque de css-tricks.com es excelente documentación pero no un generador interactivo. El creador de clip-path de bennettfeely.com se superpone en caso de uso pero apunta a clip-path en lugar de border-radius. El generador de UtiloKit ofrece: vista previa en vivo con carga de imagen (procesada completamente en el cliente), presets de formas (círculo, píldora, tarjeta, huevo, blob), generación aleatoria de blobs usando la sintaxis de barra de 8 valores, alternancia de unidades px/%, y tres formatos de copia. Sin anuncios, sin marcas de agua, sin registro, y nada enviado a un servidor.

No — la imagen se carga exclusivamente usando la File API del navegador y nunca sale de tu dispositivo. El elemento de vista previa renderiza la imagen localmente usando una llamada `createObjectURL()` que permanece íntegramente en la memoria del navegador. Sin subida, sin procesamiento en servidor, sin almacenamiento en la nube. La misma arquitectura del lado del cliente se aplica a todas las demás funciones: entradas de deslizadores, generación de CSS, aleatorización de blobs y copia al portapapeles funcionan en JavaScript sin ninguna solicitud de red después de la carga inicial de la página. Tus imágenes y trabajo de diseño permanecen completamente privados.

`border-radius` es completamente animable a través de transiciones CSS y animaciones de keyframe. Usa `transition: border-radius 0.3s ease` para interpolar suavemente entre dos valores al pasar el cursor. Usa `@keyframes` para transformar continuamente entre formas — animar de `0` a `50%` hace que un cuadrado pulse convirtiéndose en círculo. Transformar entre dos formas de blob (diferentes valores de barra de 8 valores) crea animaciones fluidas y orgánicas populares en fondos de hero. Ten en cuenta que animar border-radius desencadena un repintado en cada fotograma, así que usa `will-change: border-radius` en elementos que se animan frecuentemente.

`border-radius` es puramente visual — recorta la apariencia pintada del elemento pero no cambia su caja de maquetación, área de margen o zona de evento de puntero. Las esquinas cuadradas invisibles siguen siendo clicables y siguen ocupando su espacio de maquetación. Esto es importante para interfaces táctiles: un botón circular sigue teniendo una región de clic cuadrada en sus esquinas. Si necesitas que el área de clic siga con precisión la forma redondeada, usa `clip-path: circle()` en su lugar, que también recorta los eventos de puntero. `box-shadow` sigue `border-radius` correctamente; `outline` no lo hace en la mayoría de navegadores — usa `box-shadow: 0 0 0 3px color` como alternativa de anillo de enfoque redondeado.

Sí — la herramienta es completamente adaptable y funciona en cualquier navegador móvil moderno. En iPhone, úsala en Safari o Chrome sin instalar nada. En Android, Chrome, Firefox y Edge funcionan todos. Los deslizadores son táctiles con controles de arrastre de tamaño adecuado. La carga de imagen usa el selector de archivos nativo en móvil, lo que te permite seleccionar desde tu galería de fotos o la aplicación de archivos. Copiar CSS al portapapeles funciona a través de la API Web Clipboard estándar compatible con todos los navegadores móviles modernos. La herramienta completa se ejecuta en el cliente, por lo que no hay descarga de aplicación, sin cuenta y sin datos enviados a ningún lugar.