<img src="https://picsum.photos/id/1040/300/200" alt="a house on the top of a mountain">
<img src="https://picsum.photos/id/211/200/200" style="--r:15px" alt="a boat">
<img src="https://picsum.photos/id/193/150/200" style="--r: 5px" alt="a castle">
img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2*var(--r));
  filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r)),
    linear-gradient(#fff 0 0)  no-repeat
      50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  align-items: center;
  grid-auto-flow: column;
  grid-gap: 30px;
  background: pink;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.