https://css-tip.com/corner-only-border-image/
Creates a square outline that changes sizes on hover
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));
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: 0.4s;
}
img:hover {
outline-offset: calc(var(--g) / -1);
}- todo add screenshot or personal captured example of this effect for ease of referencing.