Esquinas Redondeadas

Acerca de GeekFormat

Haz clic para subir una imagen

JPG / PNG / WEBP

Preajuste de esquina

Radio de esquina

20%

050%

Formato de salida

Sube imagen para mostrar vista previa

Añade esquinas redondeadas a tus imágenes online, vista previa en tiempo real con el control deslizante, 3 preajustes pequeño/mediano/grande, exporta PNG transparente válido para cualquier fondo.

Relacionado

Generador ICO

Recortar Imagen

Redimensionar Imágenes

Compresor de Imágenes

Convertir Imagen

¿Qué es el redondeo de esquinas de imágenes?

El redondeo de esquinas es la técnica de reemplazar los 4 ángulos rectos de una imagen por arcos suaves. Esta herramienta dibuja rutas de rectángulo redondeado mediante arcTo() de Canvas, luego usa clip() para recortar la imagen: las áreas no rellenadas se convierten en píxeles transparentes Alpha=0 al exportar PNG.

**¿Qué efecto visual tienen las esquinas redondeadas?** Son más suaves y amigables que los ángulos rectos, reducen la agresividad visual, ampliamente usadas en diseño UI para iconos de App, botones, tarjetas, avatares. El "Superellipse (squircle)" de iOS lleva las esquinas al extremo de la curva suave.

**¿Por qué muchos iconos de App requieren esquinas redondeadas?** iOS/iPadOS/macOS Big Sur aplican máscaras de esquina automáticamente, pero un fondo blanco causa defectos de "borde blanco". Lo correcto es generar primero un PNG con esquinas redondeadas en la fuente; esta herramienta sirve para esto.

**Píxeles vs porcentajes:** Los píxeles son precisos pero difíciles de alinear entre imágenes; los porcentajes son adaptativos y consistentes en diferentes tamaños. Los sistemas de diseño usan porcentajes, como 22.37% para iOS y 25% para Android.

**Diferencia con CSS border-radius:** CSS border-radius procesa en la capa visual, la imagen exportada sigue teniendo ángulos rectos; esta herramienta genera PNG reales con canal Alfa válidos para cualquier escenario sin CSS (PPT, vídeo, impresión).

Casos de uso

Crear avatares para redes sociales (WhatsApp, LINE, Twitter/X, Instagram, Facebook), genera avatares circulares con un clic
Añadir esquinas redondeadas a iconos de App (iOS recomienda 22-25%, Android Adaptive Icon recomienda 25%)
Las imágenes de productos de e-commerce con esquinas redondeadas son más suaves y atractivas, mejorando clics y conversiones
Procesamiento local para materiales con esquinas redondeadas en presentaciones PPT, edición de vídeo e impresión
Crear iconos y materiales con el mismo radio de esquina por lotes para sistemas de diseño (procesar una por una)

Cómo Usar

Haz clic en el área de carga para seleccionar una imagen, o arrastra directamente imágenes JPG/PNG/WEBP al área de carga
Selecciona preajustes pequeño (10%), mediano (25%), grande (50%) con un clic, o arrastra el deslizador para personalizar píxeles (haz clic para cambiar entre porcentaje/píxel)
Elige formato de salida: PNG (fondo transparente)/WEBP (menor tamaño)/JPG (fondo blanco sin transparencia)
Vista previa en tiempo real a la derecha, haz clic en descargar cuando estés satisfecho, el archivo se guarda automáticamente con sufijo -rounded

Características

Doble unidad: el radio de esquina admite píxeles (0-500px) y porcentajes (0-50%) con cambio libre, adaptable a diferentes escenarios
3 preajustes: pequeño (10%), mediano (25%), grande (50%) con un clic, también admite ajuste personalizado con deslizador
Tres formatos de salida: PNG (con canal alfa), WEBP (menor tamaño), JPG (fondo blanco sin transparencia)
Vista previa en tiempo real: ajusta el deslizador para ver el efecto instantáneamente, fondo de tablero de ajedrez muestra áreas transparentes
Carga por arrastre: haz clic para seleccionar o arrastra imágenes directamente al área de carga, admite JPG/PNG/WEBP
Procesamiento local: todo se procesa en Canvas del navegador, las imágenes no se suben al servidor

Best Practices

Elige PNG por defecto para transparencia, no JPG

JPG no admite canal Alfa, se rellena con blanco forzado y aparecerán cuadrados blancos en las esquinas. Solo usa JPG cuando no necesites transparencia, elige PNG por defecto.

Elige WEBP para tamaño reducido con transparencia

WEBP también admite transparencia pero es 25-35% más pequeño que PNG, ideal para materiales web. Ten en cuenta que algunos programas de diseño antiguos pueden no reconocer WEBP, elige PNG para colaboración entre software.

Proporción de esquinas para iconos de App

El sistema iOS añade automáticamente esquinas de ~22.37% a los iconos, pero un fondo blanco original causa defectos de "borde blanco". Genera primero un PNG con esquinas redondeadas (recomendado 22-25%). Android Adaptive Icon recomienda 25% como zona segura.

Usa radio 50% para avatares circulares

La mayoría de plataformas sociales como WhatsApp, LINE, Twitter, Instagram usan avatares circulares. El preajuste de 50% genera un PNG circular con un clic, fondo transparente válido para temas claros/oscuros.

Guía de iconos iOS App

No apliques CSS border-radius a imágenes ya redondeadas

Si ya exportaste un PNG con esquinas redondeadas con esta herramienta, no lo envuelvas con CSS border-radius + overflow:hidden, causará doble procesamiento y bordes borrosos. Muestra la imagen directamente con etiqueta img.

Para esquinas más complejas (esquinas diferentes, solo superiores)

Esta herramienta solo admite esquinas estándar iguales en las cuatro esquinas. Para escenarios complejos como esquinas superiores de TabBar, esquinas inferiores o esquinas individuales, usa el [editor de imágenes](/image/image-editor/) o herramientas profesionales como Figma.

Preguntas Frecuentes

¿Cómo añadir esquinas redondeadas a una imagen?

Sube la imagen y haz clic en los botones de preajuste pequeño/mediano/grande para elegir rápidamente, o arrastra el deslizador para personalizar píxeles (0-500px) o porcentajes (0-50%). Vista previa en tiempo real a la derecha, descarga cuando estés satisfecho, el formato PNG conserva la transparencia automáticamente.

¿Usar píxeles o porcentajes para el radio?

Los píxeles son ideales para control preciso del tamaño de esquina, adecuados para escenarios de tamaño fijo. Los porcentajes calculan la esquina según la proporción del lado corto, más flexible para diferentes tamaños. Esta herramienta permite cambiar entre píxeles y porcentajes; 50% genera un círculo perfecto, ideal para avatares.

¿De qué color serán las esquinas redondeadas?

Al elegir formato PNG o WEBP, las esquinas son píxeles completamente transparentes (Alpha=0), que se fusionan naturalmente en cualquier fondo. Al elegir JPG se rellena automáticamente con fondo blanco (se muestra advertencia amarilla), adecuado para imágenes finales sin transparencia.

¿Qué formatos de imagen admite?

Admite entrada JPG, PNG, WEBP, salida en PNG (transparente), WEBP (menor tamaño), JPG (fondo blanco). El nombre de archivo de salida añade automáticamente el sufijo -rounded para distinguir del original.

¿Hay límite en el tamaño de esquina?

Modo porcentaje 0-50% (50% = círculo perfecto), modo píxel 0-500px. Cuanto mayor el valor, más redondeadas las esquinas; al alcanzar la mitad del lado corto se convierte en círculo. Esta herramienta usa Canvas arcTo + clip para esquinas estándar (no Squircle/superelipse).

¿Se puede usar para avatares o iconos de App?

Ideal. Para avatares circulares elige el preajuste de 50%; para iconos iOS App se recomienda 22-25% (usa preajuste 25%), para Android Adaptive Icon se recomienda 25% como zona segura. El PNG con fondo transparente se adapta a cualquier tema.

¿El redondeo hace que la imagen se vea borrosa?

No. Esta herramienta recorta la ruta en la resolución original con Canvas sin remuestreo ni compresión, la calidad es idéntica a la original. Las esquinas son píxeles transparentes reales, no transiciones borrosas, bordes nítidos.

¿Se filtran las imágenes durante el procesamiento?

No. Todo el procesamiento se realiza localmente en el navegador mediante Canvas API, las imágenes nunca pasan por ningún servidor desde la carga hasta la descarga. Incluso imágenes sensibles como fotos de documentos o avatares personales son seguras.

¿Por qué no se ve el efecto de esquinas redondeadas?

Verifica: ① ¿El valor de esquina es mayor que 0? (el deslizador no está en el extremo izquierdo); ② ¿La imagen se cargó correctamente? (formatos admitidos JPG/PNG/WEBP); ③ ¿El navegador admite HTML5 Canvas? (los navegadores modernos lo admiten). Si persiste, intenta recargar la página.

¿Qué diferencia hay con CSS border-radius?

CSS border-radius procesa en la capa de visualización, la imagen exportada sigue teniendo esquinas rectas y solo funciona en entornos web; esta herramienta genera archivos PNG reales con canal Alfa válidos para PPT, vídeos, impresión y cualquier escenario sin CSS.

Glosario

Radio de esquina (Border Radius): Valor del radio del arco que determina la curvatura de la esquina. Valor mayor = esquina más redonda, el máximo (mitad del lado corto) forma un círculo. Admite píxeles (0-500px) y porcentajes (0-50%).
Canal Alfa: Canal de transparencia integrado en PNG/WEBP, cada píxel usa 0-255 para opacidad. Las esquinas tienen Alpha=0 después del redondeo, por lo que el fondo es completamente transparente, no de color.
Squircle (superelipse): Forma de esquina introducida en iOS 7+, más suave que el rectángulo redondeado tradicional. Fórmula matemática x⁴+y⁴=r⁴. Esta herramienta genera arcos estándar, usa Figma/Sketch para Squircle.
Adaptive Icon: Icono adaptativo introducido en Android 8.0+, compuesto por dos capas (primer plano y fondo). Se recomienda 25% de radio como zona segura, el launcher OEM aplica máscara según su forma.
Canvas arcTo: Método de dibujo de arcos de Canvas 2D API. Esta herramienta combina arcTo + clip para crear rutas de rectángulo redondeado, recortando la imagen al área de esquina que se convierte en píxeles transparentes Alpha=0.

Tabla de referencia de estándares de esquinas por plataforma

Plataforma / Elemento	Tamaño base	Proporción recomendada	Aproximado (px)
Icono iOS / iPadOS App	`1024 × 1024`	Aprox. 22.37%	≈ 229 px
Android Adaptive Icon	`108 × 108`	Aprox. 25%	≈ 27 px
Icono macOS Sonoma App	`1024 × 1024`	Squircle superelipse	Sin px fijo
Tarjetas Windows 11	`—`	Aprox. 8 px	8 px
Material Design 3 Large	`—`	Aprox. 28 px	28 px
Avatar WhatsApp / LINE	`640 × 640`	50% (círculo completo)	320 px
Avatar Twitter / Instagram	`400 × 400`	50% (círculo completo)	200 px
Imagen principal producto e-commerce	`800 × 800`	Recomendado 16~24 px	16-24 px