Skip to main content

Corner-only border around an image

Create a corner-only border around any element.

You can also animate it on hover!

image with corner-only border

img {
--b: 5px; /* border thickness */
--c: #0000 25%,darkblue 0; /* define the color here */
padding: 10px;
conic-gradient(from 90deg at top var(--b) left var(--b),var(--c)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--c)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--c)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
background-size: 50px 50px; /* adjust border length here */
background-repeat: no-repeat;

See the Pen Corner only frames by Temani Afif (@t_afif) on CodePen.

More detail:

Another idea: Corner-only borders with hover effect