Skip to main content
CSS Tip

A Rhombus shape with rounded corners for your images

Transform your image into a Rhombus shape with rounded corners using a few lines of code

A Rhombus shape with rounded corners

img {
--r: 50px; /* the radius */
aspect-ratio: 1;
clip-path:
polygon(
50% calc(-.414*var(--r)), calc(100% + .414*var(--r)) 50%,
50% calc(100% + .414*var(--r)), calc(-.414*var(--r)) 50%
);
--_l: #0000 calc(25% + .707*var(--r)),
#000 0 calc(75% - .707*var(--r)), #0000 0;
--_g:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
mask:
linear-gradient(45deg,var(--_l)),linear-gradient(-45deg,var(--_l)),
top var(--_g) no-repeat space,left var(--_g) space no-repeat;
}

See the Pen Rhombus image with rounded corner by Temani Afif (@t_afif) on CodePen.