/* Generated on cssgen.org */
Break out of the rectangle. Visually mask images and elements into complex geometric shapes using purely mathematical CSS.
/* Generated on cssgen.org */In the past, if a designer wanted an image shaped like a hexagon or a star, they had to crop the image in Photoshop and save it as a transparent PNG. This was terrible for performance (PNGs are heavy) and rigid (you couldn't change the shape on mobile).
The CSS clip-path property solves this by allowing you to mask elements natively in the browser. Using coordinate math, you define a visible region. Anything outside of that region is completely hidden. Because it is calculated by the browser, the mask scales perfectly to any screen size. Read the technical documentation on the MDN Web Docs.
clip-path on hover. However, there is a strict rule: both the starting state and the hover state must have the exact same number of points. If your default state has 4 points and your hover state has 5 points, the browser will not animate it; it will just snap instantly.%) for your clip-paths unless you are working with fixed-size icons. Percentages ensure the mask is responsive and scales perfectly as the image grows or shrinks.filter: drop-shadow() property, which perfectly contours to your newly generated shape. Read more on our CSS Filter Generator.The CSS clip-path property creates a specific clipping region that determines which part of an element should be displayed. The portions of the element inside the coordinate region are shown, while the portions outside are hidden, allowing you to create complex shapes from standard rectangular containers.
They serve different purposes. border-radius only rounds the corners of a rectangle (though it can create ovals and blobs). clip-path can create sharp angles, complex polygons, stars, and inner cutouts that border-radius cannot physically achieve.
No, standard CSS border traces the rectangular bounding box of the element, which gets hidden by the clip-path. To add a border to a clipped shape, you must duplicate the element, make the underlying copy slightly larger, and give it a solid background color.