Skip to main content
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