Skip to main content

Fancy Rounded frame around your images

Add a nice frame around your image using a few lines of code

An image with a fancy rounded frame

img {
--s: 20px; /* size of the frame */
--g: 10px; /* the gap */
--c: #FA6900;

padding: calc(var(--g) + var(--s));
radial-gradient(farthest-side,var(--c) 97%,#0000)
0 0/calc(2*var(--s)) calc(2*var(--s)) round;
conic-gradient(from 90deg at calc(2*var(--s)) calc(2*var(--s)),#0000 25%,#000 0)
calc(-1*var(--s)) calc(-1*var(--s)),
linear-gradient(#000 0 0) content-box;
-webkit-mask: var(--_m);
mask: var(--_m);

See the Pen Cool frame image by Temani Afif (@t_afif) on CodePen.

More detail: