DEMOS › Fold corners of images

Date : 22nd May 2026

Method 1 - For all the latest browsers

Method 2 - Not yet suitable for Firefox and Safari

Hover images

Method 1 - using clip-path: polygon()

Method 2 - using corner-shape: bevel with border-radius

Information

A simple demonstration of two ways to fold the corners of images.

Method 1 uses the clip-path: polygon() which is supported by all browsers, but this does not easily allow the addition of shadows to the clipped elements.

Method 2 uses the new corner-shape:bevel with border-radius which allows the addition of shadows to the elements.

Please consider making a donation, every little helps.