Generador de imágenes con esquinas redondeadas

Qué hace diferente a este redondeador: cada esquina puede tener su propio radio, el radio puede expresarse en píxeles o como porcentaje del lado más corto, y la esquina en sí puede ser un arco redondeado simple, un squircle suave, un bisel recto o un recorte cóncavo hacia adentro. La herramienta también imprime la regla CSS border-radius correspondiente, para que la misma forma se pueda reproducir en código en lugar de como archivo.

¿Por qué redondear las esquinas de una imagen?

Cómo añadir esquinas redondeadas a una imagen

1. Carga tu imagen. Arrastra un archivo al área de soltar o elige Seleccionar imagen. JPG, PNG, WebP, GIF, BMP, AVIF y SVG funcionan siempre que tu navegador pueda decodificarlos.
2. Define el radio. Arrastra uno de los controladores de esquina redondos en la vista previa, mueve el control deslizante Radio de esquina o escribe un número exacto y cambia la unidad entre px y %.
3. Elige un estilo de esquina. Redondeado, Squircle, Bisel o Cóncavo. Desactiva Vincular todas las esquinas para dar a cada esquina su propio valor, dispuestos en pantalla exactamente como las esquinas que controlan.
4. Añade relleno, un fondo o un borde, si lo quieres. El relleno agranda el canvas alrededor de la imagen, el fondo lo rellena y el anillo de borde sigue el contorno redondeado en lugar del rectángulo original.
5. Descarga. Conserva PNG para esquinas transparentes y haz clic en Descargar imagen. El panel indica las dimensiones exportadas y el tamaño del archivo, y el recuadro CSS muestra la regla de hoja de estilos equivalente.

Radio en píxeles o en porcentaje

Un radio en píxeles es absoluto: 32 px son 32 px tanto si la imagen mide 400 como 4000 píxeles de ancho, así que el mismo valor se ve dramático en una miniatura pequeña y apenas visible en una foto grande. Un radio en porcentaje se mide respecto al lado más corto de la imagen, así que escala con la foto y se ve igual en cada exportación. El 50% es el valor útil máximo, y produce un círculo en una imagen cuadrada y una píldora en un rectángulo.

Los cuatro estilos de esquina

• Redondeado — un cuarto de círculo, la misma geometría que un navegador dibuja para border-radius. Predecible, y el único estilo que se corresponde uno a uno con CSS.
• Squircle — una esquina al estilo superelipse. La curva empieza más adelante en cada borde y fluye hacia el lado recto sin el cambio brusco de curvatura de un círculo, por eso las directrices de iconos de apps en iOS y Android usan esta forma.
• Bisel — la esquina se corta con una diagonal recta. Más afilado y técnico que una curva, y se mantiene nítido a tamaños pequeños.
• Cóncavo — el arco curva hacia adentro y elimina un bocado cóncavo. Dos esquinas cóncavas en lados opuestos se leen al instante como una entrada o una etiqueta.

Cómo elegir el formato de salida

Como JPG no tiene canal alfa, exportar uno rellena las esquinas recortadas con el color de fondo elegido en lugar de dejarlas vacías. A menudo es exactamente lo que quieres — una foto redondeada blanca sobre una página blanca — pero no es transparencia, y no se puede deshacer después.

Características principales

• Privado por diseño: el archivo se lee con la API FileReader del navegador y se dibuja en un canvas en local. Nunca se sube.
• Edición arrastrando la esquina: tira de un controlador en diagonal sobre la vista previa y observa cómo el radio sigue tu dedo o el cursor.
• Control por esquina: redondea solo las dos esquinas superiores, o haz cóncavo un lado y deja el resto cuadrado.
• Fondos de vista previa: alterna entre un tablero de transparencia, blanco, oscuro y un degradado de color para comprobar el borde alfa antes de descargar.
• Relleno, relleno de fondo y un anillo de borde que siguen el mismo contorno redondeado.
• Escala de salida: exporta a la resolución original, o reduce al 75%, 50% o 25% en el mismo paso.
• CSS copiable: la regla border-radius generada reproduce la misma forma en una hoja de estilos cuando un archivo no es la respuesta adecuada.
• Bordes con antialiasing: la esquina se dibuja como un trazado de recorte, así que la curva se mantiene suave en lugar de mostrar un borde dentado en escalera.

¿Archivo de imagen o CSS?

Si la imagen redondeada va a una presentación, un PDF, una firma de correo, un listado de marketplace o cualquier herramienta que no ejecute tu hoja de estilos, necesitas un archivo real con transparencia real: exporta un PNG. Si va a una página web que controlas, una regla CSS es más ligera, se mantiene nítida a cualquier tamaño y es más fácil de cambiar después; copia el fragmento. Las dos no se excluyen: muchos equipos envían el PNG para uso externo y el CSS para el sitio.

Solución de problemas

• La esquina se ve dentada: el origen probablemente ya es pequeño. Redondea a la mayor resolución disponible y luego reduce, en lugar de redondear una imagen que se ha agrandado.
• Aparece un halo claro fino sobre un fondo oscuro: la imagen tenía un mate blanco incrustado. Añade uno o dos píxeles de relleno de un color coincidente, o aumenta un poco el radio para que el halo se recorte.
• La descarga se abre como un cuadrado blanco: el formato es JPG o el fondo no está en Transparente. Cambia el formato de salida a PNG.
• Una foto muy grande se siente lenta: el canvas redibuja la imagen a resolución completa en cada movimiento del control deslizante. Suelta el control y da un momento al navegador, o reduce la escala de salida.
• Un GIF animado pierde la animación: el canvas exporta un solo fotograma. Solo se redondea y se guarda el primer fotograma.

Preguntas frecuentes

¿Se sube mi imagen a un servidor?

No. El archivo lo lee tu navegador con la API FileReader y se dibuja en un canvas HTML en tu propio dispositivo. No se envía nada a miniwebtool, así que las capturas privadas, el arte de clientes y las fotos personales nunca salen de tu ordenador. La página en sí sigue necesitando conexión a internet para cargarse.

¿Por qué mis esquinas redondeadas se ven blancas o negras en lugar de transparentes?

Solo PNG y WebP pueden guardar transparencia. Si exportas JPG, el formato no tiene canal alfa, así que las esquinas recortadas se rellenan con el color de fondo. Elige PNG en la lista Formato de salida y pon el fondo en Transparente. Si las esquinas siguen viéndose mal, comprueba que la app o el sitio donde pegas admite alfa, porque algunos editores aplanan la transparencia PNG sobre blanco.

¿Cómo hago una imagen perfectamente circular?

Cambia la unidad del radio a porcentaje y pon el radio en 50%. En una imagen cuadrada eso produce un círculo perfecto. En un rectángulo produce una forma de píldora o estadio, porque un radio en porcentaje se mide respecto al lado más corto. Usa el preajuste Círculo para recortar a un cuadrado y redondearlo de un clic.

¿Cuál es la diferencia entre esquinas redondeadas, squircle, bisel y cóncavas?

Redondeado es un cuarto de círculo simple, la misma forma que dibuja CSS border-radius. Squircle extiende la curva más a lo largo de cada borde para que la unión sea suave y continua, el aspecto que usan los iconos de apps de iOS y Android. Bisel corta la esquina con una línea diagonal recta. Cóncavo curva hacia adentro en lugar de hacia afuera y recorta un bocado cóncavo en cada esquina, lo que encaja con entradas, cupones e insignias.

¿El radio en píxeles coincide con el border-radius CSS de mi sitio web?

El radio se aplica en los propios píxeles de la imagen, así que coincide con CSS solo cuando la imagen se muestra a su tamaño natural. Una exportación de 1200 píxeles de ancho mostrada en una columna de 600 píxeles se escala a la mitad, así que un radio de 48 píxeles se ve como 24 píxeles en pantalla. Usa la unidad de porcentaje para un resultado independiente del tamaño, o copia el fragmento CSS que genera la herramienta, que ya indica el equivalente escalado.

¿Puedo conservar la calidad de la imagen y la resolución original?

Sí. La exportación mantiene las dimensiones originales en píxeles salvo que cambies la escala de salida o añadas relleno, y PNG no tiene pérdida, así que no se recomprime nada. Solo cambian los píxeles de las esquinas, de opacos a transparentes. WebP y JPG sí tienen pérdida, así que úsalos cuando el tamaño del archivo importe más que una copia exacta de los píxeles de origen.