<img src="https://picsum.photos/id/354/200/200" alt="A bridge">
<img src="https://picsum.photos/id/376/200/200" alt="A city" style="outline-color:#ECD078;--t: 8px;--s:80px;">
img {
--s: 50px; /* the size on the corner */
--t: 5px; /* the thickness of the border */
--g: 20px; /* the gap between the border and image */
padding: calc(var(--g) + var(--t));
outline: var(--t) solid #B38184; /* the color here */
outline-offset: calc(-1*var(--t));
-webkit-mask:
conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
0 0/calc(100% - var(--s)) calc(100% - var(--s)),
linear-gradient(#000 0 0) content-box;
transition: .4s;
cursor: pointer;
}
img:hover {
outline-offset: calc(-1*var(--g));
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
align-items: center;
grid-auto-flow: column;
gap: 80px;
background: #655643;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.