CSS Tip

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;
  background:
    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: css-tricks.com/fancy-image-decorations-single-element-magic

Another idea: Corner-only borders with hover effect

More CSS Tips