CSS Image Shapes

Image Shapes

CSS can display images in different shapes, from simple rounded corners to complex polygons. There are two common approaches:

• Visual clipping with border-radius or clip-path (changes how the image is displayed)
• Text wrapping with shape-outside (changes how text flows around a floated element)

Rounded + Circle

The simplest image shapes use border-radius.

Rounded corners:

.img-rounded {
  border-radius: 14px;
}

Circle: Use a square image box and border-radius: 50%.

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

Polygon Shapes with clip-path

The clip-path property clips an element to a shape (like a polygon). This is useful for modern card designs and creative image layouts.

Triangle-like shape:

.img-clip {
  width: 320px;
  height: 220px;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

Hexagon-like shape:

.hex {
  width: 320px;
  height: 320px;
  object-fit: cover;
  clip-path: polygon(
    25% 6%,
    75% 6%,
    100% 50%,
    75% 94%,
    25% 94%,
    0% 50%
  );
}

Tip: clip-path is widely supported in modern browsers. For older browsers, use a fallback (rounded corners) if needed.

Text Wrap with shape-outside

The shape-outside property affects how text wraps around a floated element. It does not clip the image by itself; it changes the text flow around the shape.

Circle text wrap:

.float-img {
  float: left;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 0 16px 12px 0;
  object-fit: cover;

  shape-outside: circle(50%);
}

Polygon text wrap:

.float-poly {
  float: left;
  width: 220px;
  height: 220px;
  margin: 0 16px 12px 0;
  object-fit: cover;

  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 80%);
  shape-outside: polygon(0 0, 100% 0, 85% 100%, 0 80%);
}

Important: shape-outside works only on floated elements and needs a defined width/height.

Summary

• Use border-radius for rounded and circular images.
• Use clip-path for advanced shapes like polygons.
• Use shape-outside (with floats) to wrap text around shapes.
• shape-outside affects text flow; clip-path affects the visible shape.