CSS Tip

Border with inner radius for your images

Add a border with an inner radius to your image using a simple code.

images with inner border radius

img {
  border-radius: 20%; /* works with any value or without */
  border-image: 
    conic-gradient(#A7DBD8 0 0) /* border color */
    fill 0//20px; /* border thickness */
}

See the Pen Inner radius to image element by Temani Afif (@t_afif) on CodePen.

Another syntax

img {
  border-radius: 20%; /* works with any value or without */
  border-image: conic-gradient(#A7DBD8 /* border color */ 0 0) fill 0;
  padding: 20px; /* border thickness */
}

Related: smashingmagazine.com/2024/01/css-border-image-property/

More CSS Tips