There is a block with a photo and a border, how to add such rounded corners using after and before?

Question

css

There is a block with a photo and a border added with before


, here is the code

.test{
width:500px;
height:400px;
border-left:15px solid red;
border-right: 15px solid red;
position:relative;
border-radius: 4px

}
.test:before{
position:absolute;
display:inline-block;
width:90%;
height:16px;
top:0;
left:0;
content:'';
background color: red
}

How to make such rounded corners as in the photo? Tell me please

Answer 1

On choice, with pseudo and absolute or without him.
https://jsfiddle.net/rchpmf0y/
https://jsfiddle.net/ude1w987/ Better
yet , grids : https://jsfiddle.net/4smtphxz/

Answer 2

send full picture as it should be