Esquinas Redondeadas de Imagen

Radio de las esquinas

Los sistemas operativos, las tiendas de aplicaciones y los sistemas de diseño de UI prefieren las esquinas redondeadas, íconos de iOS, tarjetas de Material, componentes modernos de Tailwind. Sube cualquier imagen y esta herramienta redondea las cuatro esquinas al radio que establezcas, exporta como PNG con esquinas transparentes y, opcionalmente, aplica un radio diferente por esquina para un aspecto de boleto o burbuja de diálogo.

Cómo redondear las esquinas de una imagen

  1. 1

    Sube una imagen

    JPG, PNG o WebP.

  2. 2

    Elige un radio

    En píxeles o como un porcentaje del lado más corto.

  3. 3

    Opcional: diferente por esquina

    Redondea solo las esquinas superiores (tarjeta), o asimétrico (boleto).

  4. 4

    Elige fondo

    Transparente (PNG) o un color sólido si se guarda como JPG.

  5. 5

    Exportar

    PNG preserva el alfa redondeado; JPG se aplana al color que elegiste.

Opciones de radio para formas comunes de UI

Presets de radio

Forma Radio
Tarjeta de UI sutil 4-8 px
Tarjeta de Material Design 4 px (o 8 px en M3)
Ícono de app de iOS 22.37% del lado (el “squircle”)
Ícono de app de macOS 18.75% del lado
Burbuja de historia de Instagram 12-16 px
Avatar redondeado 50% del lado corto (totalmente circular)
Boleto Asimétrico, redondea solo una o dos esquinas
Lado de cola de burbuja de chat Una esquina pequeña, el resto más grande

El problema del squircle

Los íconos de iOS no son simples rectángulos redondeados, utilizan un “superelipse” que es matemáticamente más suave en la transición. Los verdaderos squircles están más allá de lo que un border-radius de CSS o una simple máscara alfa pueden renderizar; la herramienta los aproxima con un rectángulo redondeado de alto orden que parece indistinguible en tamaños típicos de íconos.

Comportamiento de transparencia

  • La salida PNG es la predeterminada, las esquinas redondeadas se convierten en píxeles transparentes. Útil para íconos de aplicaciones, tarjetas de UI y en cualquier lugar donde necesites componer la imagen sobre un fondo variado.
  • La salida JPG no puede ser transparente. Las esquinas redondeadas se llenan con un color que elijas, haciendo que la foto parezca enmarcada.

Diferente radio por esquina

Un aspecto de burbuja de chat: redondea tres esquinas a 12 px y deja una a 0 px (la esquina donde se uniría la “cola”). Un boleto: dos esquinas afiladas y dos redondeadas. Los radios asimétricos son una forma rápida de sugerir que la imagen se une a algo más.

Suavizado

Las curvas de las esquinas se dibujan con un supermuestreo de 4x para que se vean nítidas en tamaños de visualización normales. Impresas o con mucho zoom, el radio sigue siendo visiblemente suave.

Preguntas frecuentes

Apple utiliza un squircle cuya curvatura de esquina es aproximadamente 22.37% del lado del ícono. En un lienzo de 1024 × 1024 eso equivale a aproximadamente 229 px de radio de esquina efectivo, aunque las matemáticas exactas difieren ligeramente de un simple rectángulo redondeado.

Sí. El radio se aplica por esquina independientemente de la relación de aspecto de la imagen. En relaciones extremas (muy anchas o muy altas), establecer el radio al 50% del lado corto produce una forma de cápsula.

No, JPG no soporta transparencia. Exporta como PNG para mantener el alfa redondeado, o elige un color de fondo para el JPG y las esquinas se llenarán con ese color.

Sí. La herramienta solo agrega una máscara alfa y no cambia el tamaño de la imagen. Si deseas combinar el redondeo con el cambio de tamaño, aplica primero el redimensionador.

Herramientas relacionadas

Herramienta disponible en otros idiomas