CSS Tip

A wiggly box (wavy borders) using CSS Mask

Using the same code structure as the wavy box to create another variation, a wiggly box!

Images inside a CSS-only wiggly box

img {
  --s: 20px;  /* control the size of the wave */
  --w: 350px; /* preferred image width */
  
  width: round(var(--w),4*var(--s));
  aspect-ratio: 1;
  padding: calc(3.5*var(--s));
  box-sizing: border-box;
  border-radius: calc(4*var(--s));
  --_r:var(--s),#000;
  --_g:conic-gradient(#000 0 0) no-repeat 50%/;
  mask: 
    radial-gradient(var(--_r) 100%,#0000 calc(100% + 1px)) 
     0 0/calc(4*var(--s)) calc(4*var(--s)),
    var(--_g) calc(100% - 6*var(--s)) calc(100% - 6*var(--s)),
    var(--_g) calc(100% - 4*var(--s)) calc(100% - 4*var(--s)) subtract,
    radial-gradient(var(--_r) calc(100% - 1px),#0000) 
     var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s));
}

See the Pen Images inside wiggly boxes by Temani Afif (@t_afif) on CodePen.

Here is another implementation with less gradients but no rounded corners for the image:

img {
  --s: 20px;  /* control the size of the wave */
  --w: 350px; /* preferred image width */
  
  width: round(var(--w),4*var(--s));
  aspect-ratio: 1;
  border: calc(2*var(--s)) solid #0000;
  padding: calc(1.5*var(--s));
  box-sizing: border-box;
  mask: 
    radial-gradient(var(--s),#000 100%,#0000 calc(100% + 1px)) 
     0 0/calc(4*var(--s)) calc(4*var(--s)),
    conic-gradient(#000 0 0) no-repeat
     50%/calc(100% - 6*var(--s)) calc(100% - 6*var(--s)),
    radial-gradient(var(--s),#0000 calc(100% - 1px),#000) 
     var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)) padding-box;
}

See the Pen Images inside wiggly boxes II by Temani Afif (@t_afif) on CodePen.

And another one with a different visual for the corners

See the Pen Images inside wiggly boxes III by Temani Afif (@t_afif) on CodePen.

More CSS Tips