The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →CSS clip-path lets you show an image through a circle, oval, inset rectangle, or custom outline without changing the source image. Choose a shape function that matches the silhouette you need, then size the image and clipping region for the intended result.
What CSS clip-path does to an image
MDN describes clip-path as a property that “creates a clipping region that sets what part of an element should be shown.” Pixels outside that region are hidden; the image file itself is not destructively edited. The clipping boundary controls the visible shape, while image sizing and positioning control which part of the photo appears inside it. See MDN’s clip-path reference.
As an Amazon Associate I earn from qualifying purchases.
Choose a shape function
| Shape needed | CSS function | How it is defined |
|---|---|---|
| Circle, such as an avatar | circle() |
A radius and, optionally, a center point. |
| Oval | ellipse() |
Horizontal and vertical radii, with an optional center. |
| Rectangular crop with selected margins | inset() |
Inset distances from the reference box edges. |
| Diamond, chevron, or other straight-edged outline | polygon() |
An ordered sequence of coordinate pairs marking the vertices. |
| More complex outline | path() or an SVG <clipPath> source |
A path definition or a reference to an SVG clipping shape. |
The shape syntax and examples are documented in MDN’s introduction to CSS clipping.
Free tools Windows power users keep installed
One-click scans. No signup required.
Apply a circular crop
Give the image a square box and clip it to a circle. object-fit: cover fills that box by cropping any excess image area, while clip-path defines the circular boundary.
#1 Best Overall
.avatar {
width: 12rem;
aspect-ratio: 1;
object-fit: cover;
clip-path: circle(50%);
}The circle(50%) radius creates a circle centered in the element by default. If the image box is not square, the circular boundary still maps against that box, so set the dimensions deliberately when you want a round result.
Build a diamond or another polygon
For a diamond, place four vertices at the middle of each edge. Polygon points are read in order around the outline, and percentage coordinates scale with the element’s reference box.
.diamond {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Each pair is an x and y coordinate: the first point is at the top center, followed clockwise by the right center, bottom center, and left center. Change those coordinates to make other straight-edged silhouettes, such as angled banners or chevrons. More details on coordinate syntax appear in MDN’s polygon() reference.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsUnderstand the reference box and image framing
Basic shapes are measured against a reference box. If you do not specify a geometry box, the default is border-box. The element’s dimensions therefore affect where the shape falls: percentages in a polygon follow the reference box, and a circle or ellipse is likewise calculated in relation to it.
Separate the two decisions when tuning a crop: use the element’s size and image-fitting rules to frame the photograph, then adjust the clipping function to define the visible silhouette. A clip changes what is shown, not which pixels are stored in the original image.
Rank #3
Check support for the exact syntax
MDN marks clip-path as widely available across browsers since January 2020, but support can differ for individual functions and values. Check compatibility for the exact syntax you plan to use—especially for less familiar path-based shapes—and test in the browsers your site must serve. See the compatibility information in MDN’s property reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
