CSS Tip

Transparent inner border for images

Cut a border from the inside of an image using the mask property and two gradients.

CSS-only inverted radius shape

img {
  --o: 20px; /* offset of the border*/
  --b: 5px;  /* border thickness */
  
  mask:
    conic-gradient(#000 0 0) no-repeat 50%/
     calc(100% - 2*(var(--o) + var(--b))) 
     calc(100% - 2*(var(--o) + var(--b))),
    conic-gradient(from 90deg at var(--o) var(--o),#0000 25%,#000 0)
     0 0/calc(100% - var(--o)) calc(100% - var(--o));
}

See the Pen Transparent inner border for images by Temani Afif (@t_afif) on CodePen.

Here is another demo with a hover effect

See the Pen Transparent inner border with hover effect by Temani Afif (@t_afif) on CodePen.

More CSS Tips