Esquinas redondeadas e imágenes circulares para tu web

Las esquinas redondeadas pueden integrar las fotos en tarjetas, mientras que los retratos circulares dan coherencia a una página de equipo. La forma debe servir al contenido: un círculo que corta una cara o un redondeo que oculta un detalle importante del producto no mejora la imagen.

Puedes modificar el archivo o dejar que el navegador redondee su aspecto en la página. La elección depende de dónde usarás el resultado y de si necesitarás cambiar la forma después.

¿Usar CSS o editar el archivo?

CSS suele ser más flexible en una web que controlas. Permite usar el mismo original en varios diseños, ajustar las esquinas en toda la web y cambiar el recorte sin exportar otro archivo. Muchos editores ya ofrecen un ajuste de radio que aplica ese estilo.

Edita el archivo si la web o aplicación acepta imágenes pero no permite configurar las esquinas, o si quieres colocar la imagen redondeada en otro diseño. Los bordes transparentes se guardan en el archivo y la forma no depende del CSS de tu web.

Elige una forma y un radio adecuados

Empieza por la función de la imagen. Un círculo puede servir para un retrato pequeño centrado en el rostro. Un paisaje, una captura o un detalle de producto suele necesitar un rectángulo para conservar más información.

Para tarjetas, prueba un radio moderado de 12 o 16 píxeles CSS y compáralo con tarjetas, botones y otras imágenes. Son ejemplos de diseño, no requisitos. Reutilizar unos pocos radios ayuda a mantener la coherencia más que elegir un redondeo distinto para cada foto.

Valora el resultado al tamaño real de visualización. Un radio sutil en una imagen grande puede casi desaparecer en miniatura. Si el redondeo está guardado en el archivo, cambia de escala con la imagen. Un radio CSS fijo de 16 píxeles conserva ese tamaño CSS aunque cambie la anchura visible.

Por ejemplo, una imagen de 800 × 400 con un redondeo Pixilo del 25% tiene un radio guardado de 50 píxeles. Mostrada a 400 × 200, ese radio se reduce a unos 25 píxeles CSS. A 200 × 100 queda en unos 12,5. Elige el valor mirando el tamaño que verá el visitante, no solo la vista previa completa.

Mantén lo importante lejos de las esquinas. Revisa a las personas en los extremos de una foto de grupo y los textos o controles de una captura. Si desaparece un detalle útil, reduce el redondeo o cambia el recorte en lugar de forzar la forma.

Redondea las esquinas con Pixilo

1. Prepara una copia. Guarda el original aparte. Si necesitas otra forma, usa primero la herramienta de recorte. Si las dimensiones son excesivas, redimensiona la copia antes de redondear.
2. Selecciona la imagen. Abre Esquinas redondeadas y elige un JPG, PNG o WebP.
3. Ajusta Redondeo de esquinas. Empieza con un valor bajo y auméntalo observando la vista previa. Las cuatro esquinas comparten el radio.
4. Elige el fondo de las esquinas eliminadas. Mantén Fondo transparente activado si la imagen debe funcionar sobre varios colores de página. Desactívalo para elegir un color de fondo.
5. Descarga y comprueba. Selecciona Descargar PNG, abre el archivo y revisa los bordes sobre el fondo previsto.

La herramienta conserva la anchura y altura en píxeles. Elimina o rellena las esquinas dentro de esas dimensiones, pero no redimensiona la imagen ni quita el fondo del sujeto.

¿Qué significa el porcentaje de redondeo?

Pixilo calcula el radio como porcentaje de la mitad del lado más corto. Al 0% las esquinas siguen rectas; al 100% se usa el mayor radio circular que cabe. En el ejemplo de 800 × 400, la mitad del lado corto son 200 píxeles y el 25% son 50.

El control no equivale a un porcentaje CSS. CSS calcula los radios horizontales según la anchura y los verticales según la altura. En una caja no cuadrada, border-radius: 50% crea una elipse. El 100% de Pixilo crea una cápsula en un rectángulo y un círculo en un cuadrado.

Crea una imagen circular con Pixilo

Empieza con una imagen cuadrada. Una imagen ancha sigue siendo ancha incluso con el máximo redondeo, así que elige el recorte antes de aplicar el círculo.

1. Recorta a 1:1. Abre el original en la herramienta de recorte y elige un cuadrado. Deja espacio alrededor de la cabeza u objeto: el círculo ocultará las esquinas.
2. Elige dimensiones adecuadas. Una copia de 320 × 320 es una opción para un retrato mostrado a 160 × 160 píxeles CSS en una pantalla 2×. Usa la herramienta de redimensionado si hace falta. Compara detalles al tamaño final y evita ampliar una fuente pequeña solo para alcanzar esas medidas.
3. Redondea el cuadrado. Selecciona la copia en Esquinas redondeadas, ajusta Redondeo de esquinas al 100% y mantén Fondo transparente activado.
4. Revisa el círculo guardado. Descarga el PNG y confirma que cabeza, pelo y detalles importantes quedan dentro del área visible.

El círculo está dentro de un PNG cuadrado con esquinas transparentes. Las dimensiones del archivo no cambian; solo se vuelve circular el contorno visible. La pared o habitación detrás de la persona sigue apareciendo dentro del círculo.

Añade esquinas redondeadas con CSS

Si tu editor ya ofrece un ajuste de radio, pruébalo primero. En una implementación propia, el CSS debe dirigirse al elemento de imagen:

1. Añade la clase. Si editas HTML, usa el ejemplo siguiente o añade rounded-image al atributo class del elemento <img> existente. En el campo de clases del editor escribe el nombre sin punto inicial y comprueba si se aplica a la imagen o a un elemento contenedor.
2. Añade el CSS. Pega el ejemplo en la hoja de estilos o el campo de CSS personalizado. Conserva el punto de .rounded-image, que selecciona elementos con esa clase. Un campo CSS suele esperar solo CSS, sin etiquetas HTML <style>.
3. Comprueba la imagen publicada. Sustituye ruta y datos de la imagen si usas el HTML siguiente. Previsualiza la página y comprueba que el tema o el editor no anulen los estilos.

Este ejemplo conserva las proporciones y permite reducir la imagen dentro de su contenedor:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Cocina terminada con armarios de roble y encimera de piedra">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Usa tu ruta, dimensiones y texto alternativo. La anchura y altura HTML describen la fuente y ayudan a reservar espacio. CSS controla el tamaño visible y las esquinas. Para el ejemplo circular siguiente, repite los pasos con la clase team-avatar y su CSS.

Si el editor añade la clase al contenedor, cambia el selector .rounded-image por .rounded-image img. En el ejemplo circular usa .team-avatar img en lugar de .team-avatar. Así los ajustes de tamaño y redondeo se aplican a la imagen interior.

El valor 16px redondea las cuatro esquinas. CSS permite radios distintos: border-radius: 16px 16px 0 0 redondea solo las superiores. El orden es superior izquierda, superior derecha, inferior derecha e inferior izquierda. Pixilo redondea las cuatro por igual. Consulta la referencia de border-radius en MDN para conocer la sintaxis y los porcentajes.

CSS cambia el aspecto en esa página, no el archivo descargado. Abrir o guardar el original por separado no conserva esa forma. Las partes ocultas con CSS siguen presentes en la fuente.

Crea una imagen circular con CSS

Un círculo CSS necesita la misma anchura y altura visibles. La foto de origen puede ser rectangular: object-fit: cover llena el cuadrado sin deformar a la persona, y el radio lo recorta en círculo.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fisioterapeuta">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Este ejemplo parte de 800 × 1200 píxeles y muestra la foto en un cuadrado de 160 × 160. Cambia los valores para tu imagen y diseño. Si ajustas el tamaño en un punto de ruptura móvil, mantén anchura y altura iguales.

object-fit: cover conserva las proporciones y recorta lo que sobra. object-position: 50% 40% centra horizontalmente y, con esta fuente vertical, muestra una zona algo más alta que el centrado vertical predeterminado. No acerca ni aleja el rostro. Ajusta la posición para cada retrato.

MDN explica object-fit y object-position con más detalle. No fuerces una foto rectangular a un cuadrado sin ajustes de encaje adecuados, porque puedes estirar al sujeto.

Ejemplo: retratos de equipo coherentes

Imagina cuatro fotos de una clínica: dos retratos de cabeza y hombros, una toma más amplia de una sala y un primer plano muy cerrado. La página las mostrará en círculos de 160 × 160. Darles el mismo contorno es solo el primer paso.

1. Elige un recorte de referencia. Decide con un retrato cuánto mostrar de cabeza y hombros. Deja aire sobre el pelo y coloca los ojos a alturas parecidas. Úsalo como referencia visual, no como una medida rígida para todas las personas.
2. Iguala el tamaño de los rostros. Recorta más la foto amplia para que la persona no parezca mucho más pequeña. Si el primer plano ya corta pelo o barbilla, usa un original más amplio si existe. Agrandar el círculo no recupera lo que falta.
3. Elige cómo hacer el círculo. Con CSS, prepara los recortes, usa el mismo marco de 160 × 160 y ajusta cada posición. Para archivos circulares, prepara cuadrados iguales, como 320 × 320 cuando convenga, y aplica el 100% de Pixilo en todos.
4. Revisa el conjunto. Coloca los retratos junto a los nombres al tamaño real. Ninguna cara debe dominar solo por estar más recortada. Comprueba después el móvil, donde pueden quedar uno sobre otro.

La coherencia depende del encuadre y del tamaño de las caras, además del círculo. Mantén el contexto útil, pero escribe nombres y cargos en el texto de la página, no dentro del retrato.

Elige fondo y formato

Guarda con transparencia si la imagen debe funcionar en varios colores de página o en modo oscuro. Una esquina blanca puede fundirse con una página blanca y verse como un parche cuadrado en una tarjeta oscura. Algunos visores representan la transparencia en blanco o con un damero. Prueba otro fondo antes de concluir que hay píxeles blancos.

Con Fondo transparente desactivado, el color elegido rellena tanto las esquinas eliminadas como las zonas que ya eran transparentes. No sustituye el fondo opaco de la foto. Si rellenaste con blanco y necesitas transparencia, vuelve al original y guarda otra copia con la opción activada.

PNG conserva la transparencia sin añadir otra compresión con pérdidas, pero puede aumentar el peso de una foto. Para la web, compara una copia WebP, que puede conservarla. La conversión de Pixilo es con pérdidas: revisa bordes y detalles. JPG no conserva esquinas transparentes. Nuestra guía de fondos transparentes explica estas opciones.

Si haces la forma con CSS, la foto no necesita transparencia. Conserva un JPG o WebP adecuado y deja que el navegador redondee su aspecto. CSS no comprime la fuente. Elige dimensiones para el diseño y compara peso y nitidez del archivo entregado.

Comprueba el resultado en el diseño real

• Revisa el sujeto. Comprueba caras, pelo, bordes del producto y texto cerca del recorte. La forma debe conservar lo que necesita el lector.
• Comprueba pantallas pequeñas. En un círculo CSS, anchura y altura visibles deben seguir siendo iguales. Valora también el radio al tamaño final.
• Prueba los fondos de la página. Busca esquinas opacas no deseadas o un halo claro sobre superficies claras y oscuras.
• Revisa la versión final. La web o aplicación puede redimensionar, recortar o convertir el archivo. Comprueba la copia guardada o publicada, también después de cambiar el formato.
• Conserva un texto alternativo útil. Describe la función, no solo la forma. El retrato debe identificar a la persona en contexto; las imágenes decorativas suelen necesitar texto alternativo vacío. Consulta nuestra guía de texto alternativo y nombres de archivo.

Preguntas frecuentes

¿Por qué la imagen se convirtió en óvalo o cápsula?

Comprueba las proporciones. Para un círculo CSS usa anchura y altura visibles iguales; en Pixilo recorta un cuadrado antes del 100%. La comparación anterior muestra por qué un rectángulo produce otro contorno.

¿Por qué las esquinas siguen blancas?

Prueba primero otro fondo como se explica arriba. Si hay píxeles blancos, comprueba si elegiste un color sólido o convertiste a JPG. La web o aplicación puede haber sustituido la transparencia por blanco. Guarda una copia transparente desde el original y revisa el formato tras publicar.

¿Por qué la imagen tiene esquinas rectas dentro de una tarjeta redondeada?

Redondear la tarjeta no recorta automáticamente su imagen. Aplica el radio a la imagen o usa un contenedor redondeado con overflow: hidden si hay que recortar todo el contenido junto. Si contiene controles interactivos, comprueba que no desaparezcan sus indicadores de foco del teclado.

¿Puedo hacer un círculo sin recortar nada de la foto?

Un círculo no puede llenar todo el marco de una foto rectangular sin perder alguna zona o cambiar la composición. Si necesitas conservar todo, coloca la foto en un diseño cuadrado mayor con espacio alrededor y comprueba el límite circular. Un rectángulo suele convenir más para contenidos detallados.

¿Las imágenes redondeadas cargan más rápido?

La forma por sí sola no garantiza una descarga menor. Revisa dimensiones y formatos como se indica arriba y mide el archivo que entrega la página publicada.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)