Image Shapes

You will use CSS clip-path to make images appear as circles, ellipses, polygons, or inset shapes without editing the image file.

What it is

clip-path defines a visible clipping region for an element. For an image, it hides the parts of the picture outside the shape while leaving the element's rectangular layout box in place. Think of it as a cookie cutter placed over the rendered image. Related terms include basic shapes such as circle(), ellipse(), inset(), and polygon(), plus the reference box that determines where percentage coordinates start.

Why it matters

• Creates circular avatars and profile pictures quickly.
• Adds modern, non-rectangular visual interest to cards and galleries.
• Avoids editing or exporting multiple image files.
• Works with responsive sizes when coordinates use percentages.
• Keeps the original alt text available to assistive technology.

Syntax or steps

The smallest useful pattern is to give the image a size, then apply a shape:

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  clip-path: circle(50%);
}

For more shapes, use:

• ellipse(40% 50%) for an oval.
• inset(10% 10% 10% 10% round 20px) for a rounded inner rectangle.
• polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) for a diamond.

Percentage coordinates are measured from the element's reference box, usually its border box.

Example

<img src="photo.jpg" alt="A person smiling" class="avatar">
<img src="photo.jpg" alt="A person smiling" class="diamond">

.avatar {
  width: 180px;
  height: 180px;
  object-fit: cover;
  clip-path: circle(50%);
}

.diamond {
  width: 180px;
  height: 180px;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

The first image becomes a circle because, on this square element, circle(50%) creates a radius that reaches the edges. The second becomes a diamond because the polygon lists four points: top center, right center, bottom center, and left center. object-fit: cover prevents the photo from stretching inside the square box.

Common mistakes

• Expecting the layout to shrink. The clipped image still occupies its original rectangular space. Fix it by setting a smaller width and height or placing it in a sized container.
• Getting a stretched image. A square clip on a wide photo can distort it. Fix it with object-fit: cover.
• Listing polygon points out of order. Points should trace the outline in sequence. Fix it by drawing the shape on paper first.
• Assuming the hidden pixels are removed. clip-path changes rendering, not the image file or DOM content. Fix it by editing the source image if you need a true transparent asset.

When to use it

Use clip-path when you need a shape that border-radius cannot create, such as a triangle, star, or custom polygon.

Practice

Guided exercise: Make a 160 px square image appear as a circle, then change the shape to an ellipse that is wider than it is tall. Expected output: a round avatar, then an oval avatar.

Challenge: Create a triangle using polygon(). Hint: use three points such as 50% 0%, 100% 100%, and 0% 100%.

Quick check

Question: Does clip-path change the image's layout size?

Answer: No. It changes only the visible clipped region; the element still reserves its original rectangular layout box.

Summary

clip-path is a CSS masking tool that turns rectangular images into circles, ellipses, polygons, or inset shapes. It is ideal for visual design, but remember that the layout box and source image remain unchanged.