Skip to main content

Fancy corner decoration for your images

Add a fancy decoration to the corners of your image using a few lines of code

corner-only decoration for images

img {
--w: 250px; /* image width */
--r: 1; /* image ratio */
--c: 113px; /* control the size of the decoration */

width: var(--w);
padding: 10px; /* control the outer space */
box-sizing: border-box;
aspect-ratio: var(--r);
object-fit: cover;
--_g:calc(100% - var(--w)/2)/calc(var(--w)*(1 + 1/var(--r)) - var(--c));
background: repeating-conic-gradient(from 45deg,#0000 0 25%,#0005 0 50%) var(--_g);
mask: repeating-conic-gradient(from 45deg,#000 0 25%,#0005 0 50%) var(--_g);

See the Pen Fancy corner decoration for images by Temani Afif (@t_afif) on CodePen.