CSS Image Shapes

A photo doesn't have to stay a rectangle — border-radius and clip-path can crop an image into a circle, an ellipse, a triangle, or a custom polygon entirely in CSS, with no image-editing software involved.

In this page:

Circles and Ellipses with border-radius
Introducing clip-path
Polygon Shapes
Animating Shape Changes
border-radius vs clip-path

Circles and Ellipses with border-radius

Setting border-radius: 50% on a square image crops it into a perfect circle, while applying it to a non-square image produces an ellipse instead — this is the simplest shape technique and works in every modern browser with no vendor prefixes.

Example: Circles and Ellipses with border-radius

css

<style>
img {
  border-radius: 50%;
}
</style>
<img src="https://placehold.co/100x100" alt="Cropped into a circle">

Introducing clip-path

clip-path defines an arbitrary visible region for an element using basic shape functions like circle(), ellipse(), polygon(), or inset() — anything outside the defined shape is simply clipped away, revealing the page background (or whatever sits behind it) underneath.

Example: Introducing clip-path

css

<style>
img {
  clip-path: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Clipped, revealing what's behind it">

Polygon Shapes

clip-path: polygon(...) takes a list of x,y coordinate pairs defining a custom straight-edged shape — a triangle, a diamond, a hexagon, or an arrow — by connecting the listed points in order around the element's box.

Example: Polygon Shapes

css

<style>
.triangle {
  width: 150px;
  height: 150px;
  background: teal;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
<div class="triangle"></div>

Animating Shape Changes

Because clip-path values can be transitioned, hovering an element can morph its clipped shape smoothly from one polygon to another (as long as both shapes have the same number of coordinate points), a technique impossible with border-radius alone.

Example: Animating Shape Changes

css

<style>
.shape {
  width: 150px;
  height: 150px;
  background: crimson;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s;
}
.shape:hover {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
<div class="shape"></div>

border-radius vs clip-path

border-radius only rounds corners and can't produce anything besides rectangles-with-rounded-corners, circles, and ellipses, while clip-path can create arbitrary polygon and curve-based shapes — reach for clip-path whenever the desired shape isn't a simple rounded rectangle or ellipse.

Example: border-radius vs clip-path

css

<style>
.rounded {
  width: 100px;
  height: 100px;
  background: gray;
  border-radius: 20px;
}
.hexagon {
  width: 100px;
  height: 100px;
  background: gray;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>
<div class="rounded"></div>
<div class="hexagon"></div>

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Centering Next Lesson → CSS Buttons