<img src="https://picsum.photos/id/1018/300/300" class="bottom-right">
<img src="https://picsum.photos/id/128/300/300" class="bottom-left">
<img src="https://picsum.photos/id/139/300/300" class="top-right">
<img src="https://picsum.photos/id/1022/300/300" class="top-left">
img {
--r: 25px; /* the radius */
--s: 40px; /* the size of the corner*/
width: 200px;
border-radius: var(--r);
--_m:/calc(2*var(--r)) calc(2*var(--r))
radial-gradient(#000 70%,#0000 72%) no-repeat;
}
.top-right {
mask:
right calc(var(--s) + var(--r)) top 0 var(--_m),
right calc(var(--s) + var(--r)) var(--_m),
radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
calc(-1*var(--r)) var(--r) no-repeat,
conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)),
#0000 25%,#000 0);
}
.top-left {
mask:
calc(var(--s) + var(--r)) 0 var(--_m),
0 calc(var(--s) + var(--r)) var(--_m),
radial-gradient(var(--s) at 0 0,#0000 99%,#000 101%)
var(--r) var(--r) no-repeat,
conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)),
#000 75%,#0000 0);
}
.bottom-left {
mask:
calc(var(--s) + var(--r)) bottom var(--_m),
bottom calc(var(--s) + var(--r)) left 0 var(--_m),
radial-gradient(var(--s) at 0 100%,#0000 99%,#000 101%)
var(--r) calc(-1*var(--r)) no-repeat,
conic-gradient(from 180deg at calc(var(--s) + 2*var(--r)) calc(100% - var(--s) - 2*var(--r)),
#0000 25%,#000 0);
}
.bottom-right {
mask:
right 0 bottom calc(var(--s) + var(--r)) var(--_m),
right calc(var(--s) + var(--r)) bottom 0 var(--_m),
radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 101%)
calc(-1*var(--r)) calc(-1*var(--r)) no-repeat,
conic-gradient(from 90deg at calc(100% - var(--s) - 2*var(--r)) calc(100% - var(--s) - 2*var(--r)),
#0000 25%,#000 0);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-columns: auto auto;
place-content: center;
gap: 20px;
background: #9DE0AD;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.