How to add this kind of border in html - css?

Question

As shown in the picture, how can we achieve this effect by adding borders to the four corners of the picture

Answer 1

Absolute positioning,
Four squares p,
Set the border of each square

Answer 2

QR code for testing:

Here I am again. In the past few days, I have been thinking about whether this thing can be further simplified. I tried to use border-image to implement it, but found that the implementation was not much different from the background, so I gave up. If anyone There is a better way, which can also be proposed and shared with everyone.

Today, I had a sudden inspiration, and I remembered that the value of background-repeat is not only repeat, but also a space.
Isn’t this exactly what we need? I left a blank space in the middle and found that it worked, and the code was much simpler.
The following is the Demo:

Demo3

====================================================
The following is the original answer:
DEMO1
Regarding this DEMO, I feel that there is no other meaning except that it uses a lot of complicated ideas.
So when I saw this rendering, I thought of using a background layer overlay to achieve it.

DEMO2
Specifically, the first layer (the background closest to the user) is set as a QR code image

Then the second layer and the third layer are two white narrow rectangles repeated in the x and y directions.
So behind the first layer of QR code we will get,

Because the background color layer is drawn behind all background images, so we set the color to #15A6FF and we will get

That is, covering layer by layer to get the final result.
A little idea, just for reference.

Answer 3

You can use the before and after pseudo-classes. The QR code area uses a blue border. Then one of the before and after in the QR code area uses the upper and lower white borders, and the other uses the left and right white borders. Then adjust the position to invalidate what you want. Desired effect

Answer 4

You can use multiple background overlapping methods
Set the size and position of the main background and four border backgrounds respectively

.block{
  width: 200px;
  height: 200px;
  padding: 25px;
  background-image:linear-gradient(#58a,#58a)
    ,linear-gradient(to left,#0292f3 33.3%,transparent 0,transparent 66.6%  , #0292f3 0)
    ,linear-gradient(#0292f3 33.3%,transparent 0,transparent 66.6%  , #0292f3 0)
    ,linear-gradient(to right,#0292f3 33.3%,transparent 0,transparent 66.6%  , #0292f3 0)
    ,linear-gradient(to bottom,#0292f3 33.3%,transparent 0,transparent 66.6%  , #0292f3 0);
     background-clip: content-box,border-box,border-box,border-box,border-box;
    background-position: 0 0,0 0,100% 0,0 100%,0;
    background-size: 100%,100% 5px,5px 100%,100% 5px,5px 100%;
    background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat; 
}

Answer 5

It’s ok to use absolute positioning

Answer 6

Pseudo class p: before Press the four p below to set the border.
Then block the other two sides. This is all I can think of for now