La propiedad shape-outside en CSS permite crear flujos de texto personalizados alrededor de un elemento flotante. Uno de los usos más llamativos es hacer que el texto se alinee de forma natural alrededor de una imagen circular, lo cual es ideal para artículos de blog, biografías o diseños editoriales modernos.
Para que funcione correctamente, el elemento (en este caso una imagen) debe tener:
• Un float aplicado
• Dimensiones específicas (width y height)
• Un shape-outside definido (como circle() o polygon())
img#circulo {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
border-radius: 50%;
margin-right: 10px;
}<img id="circulo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/240px-PNG_transparency_demonstration_1.png" alt="Imagen circular" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et efficitur tellus, a gravida est.</p>