CSS Image Shapes
Clipping images into circles, ellipses, and polygons takes very little CSS.
CSS clip-path Property and the circle() Function
To cut an element down to a basic shape, use clip-path.
One such shape is circle(), described by its radius and position.
Circle with 50% radius
A radius of 50% is all this image's circular clip needs.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Clip Path</title>
<style>
img {
clip-path: circle(50%);
}
</style>
</head>
<body>
<h2>Clip an Image to a Circle</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Circle positioned right
A circle's center is adjustable too. It accepts a length, a percentage, or one of the keywords left, right, top, and bottom; if you set none, it stays at center.
This image keeps the 50% radius, but the circle's center moves to the right.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Clip Path Positioned</title>
<style>
img {
clip-path: circle(50% at right);
}
</style>
</head>
<body>
<h2>Clip an Image to a Circle Positioned Right</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS shape-outside and circle()
When inline content wraps around a floated element, shape-outside decides the shape it follows.
Here that shape comes from circle(), which takes a radius and a position.
Example
The text follows a curve here because shape-outside is a circle of 45% radius, while the image itself is clipped to a circle of 40% radius.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Shape Outside</title>
<style>
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
</style>
</head>
<body>
<h2>Circle with shape-outside</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>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.</p>
</body>
</html>
CSS clip-path and ellipse()
Besides circles, clip-path can clip an element to other basic shapes.
ellipse() is one of them, and it needs two radii, x and y.
Ellipse clip
The radii for this image's elliptical clip are 50% for x and 35% for y.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Clip Path</title>
<style>
img {
clip-path: ellipse(50% 35%);
}
</style>
</head>
<body>
<h2>Clip an Image to an Ellipse</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Ellipse positioned right
Ellipses can have their center moved as well, using a length, a percentage, or the keyword left, right, top, or bottom. Leaving it out means center.
With the same 50% x and 35% y radii, this image's ellipse is centered to the right.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Clip Path Positioned</title>
<style>
img {
clip-path: ellipse(50% 35% at right);
}
</style>
</head>
<body>
<h2>Clip an Image to an Ellipse Positioned Right</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS shape-outside and ellipse()
Text can wrap around an elliptical shape too, by giving shape-outside an ellipse() value.
Example
The clip on this image is an ellipse of 40% x and 50% y radius. shape-outside uses a slightly larger one, 45% x and 50% y, and the text wraps around that elliptical shape.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Shape Outside</title>
<style>
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
</style>
</head>
<body>
<h2>Ellipse with shape-outside</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>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.</p>
</body>
</html>
CSS polygon() Function
A polygon shape is described with polygon().
Its arguments are a list of points, each one an x and y coordinate pair given as lengths or percentages. The top-left corner is 0 0, and the bottom-right corner is 100% 100%.
Two properties accept this function: clip-path and shape-outside.
Example
The polygon used to clip this image forms a diamond.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polygon Clip Path</title>
<style>
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<h2>Clip an Image to a Polygon</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS Properties and Functions
A recap of what this chapter used, properties and functions alike:
clip-path- clips an element to a basic shape or to an SVG source.shape-outside- gives wrapping inline content a shape to follow.circle()- a circle, set by its radius and position.ellipse()- an ellipse, set by its x and y radii.polygon()- a polygon.