Skip to main content
CSS Tip

Corner-only borders with hover effect

Add corner-only borders to your images with a nice hover effect

Images with corner-only border

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: .4s;
}
img:hover {
outline-offset: calc(var(--g)/-1);
}

See the Pen Corner-only borders with hover effect by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/css-effects-on-images-ii


More CSS Tips