CSS Image Shapes
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
The CSS clip-path Property
The clip-path property lets you clip an
element to a basic shape.
The CSS circle() Function
The circle() function defines a circle with a radius and a position.
The circle() function is used within the clip-path property.
Here we clip an image to a circle with 50% radius:
Example
Clip an image to a circle with 50% radius:
img {
clip-path: circle(50%);
}
Try it Yourself »
We can also specify the center of the circle. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center.
Here we clip an image to a circle with 50% radius and position the center of the circle to the right:
Example
Clip an image to a circle with 50% radius and position the center of the circle to the right:
img {
clip-path: circle(50% at right);
}
Try it Yourself »
The CSS shape-outside Property
The shape-outside property lets you define a shape for
the wrapping of the inline content.
The circle() function is also used within the
shape-outside property.
Here we clip an image to a circle with 40% radius, and set the shape-outside to a circle with 45% radius (to shape the text):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Example
Use of circle(), clip-path and shape-outside:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
Try it Yourself »
The CSS ellipse() Function
The ellipse() function defines an ellipse with two radii x and y.
The ellipse() function is used within the clip-path property and the
shape-outside property.
Here we clip an image to an ellipse with 50% radius x and 35% radius y:
Example
Clip an image to an ellipse with 50% radius x and 35% radius y:
img {
clip-path: ellipse(50% 35%);
}
Try it Yourself »
We can also specify the center of the ellipse. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center.
Here we clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right:
Example
Clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right:
img {
clip-path: ellipse(50% 35% at right);
}
Try it Yourself »
The shape-outside Property and ellipse()
Here we clip an image to an ellipse with 40% radius x and 50% radius y, and set the shape-outside to an ellipse with 45% radius x and 50% radius y (to shape the text):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Example
Use of ellipse(), clip-path and shape-outside:
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
Try it Yourself »
The CSS polygon() Function
The polygon() function defines a
polygon.
The polygon() function contains points that
define the polygon. This can be a length or percentage value. Each point is a
pair of x and y coordinates. 0 0 defines the left top corner and 100% 100%
defines the right bottom corner.
The polygon() function is used within the
clip-path property and the
shape-outside property.
Here we clip an image to a polygon:
Example
Clip an image to a polygon:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Try it Yourself »
CSS Properties and Functions
The following table lists the CSS properties and functions used in this chapter:
| Property/Function | Description |
|---|---|
| clip-path | Lets you clip an element to a basic shape or to an SVG source |
| shape-outside | Lets you define a shape for the wrapping of the inline content |
| circle() | Defines a circle with a radius and a position |
| ellipse() | Defines an ellipse with two radii x and y |
| polygon() | Defines a polygon |
