What is the best way to implement such an element?

Question

css

I mean the frame of the image

Answer 1

Option using box-shadow:

box-shadow: 10px -10px 0px 0 white,
    10px -10px 0px 1px teal;

With this implementation, you can do without unnecessary wrappers and the use of pseudo-elements
Example on codepen

Answer 2

Alternatively, you can use an image wrapper + pseudo -elements :beforeand :after.
The shift can be adjusted either topand leftor translate(X,Y).
jsbin example

Answer 3

make a frame for the parent img tag
, for example, for span, and shift the image itself to position: relative