Есть блок с фото и бордером как добавить с помощью after и before такие закругление угли?

Question

[Alisa71]

Есть блок с фото и бордером добавленным с помощью before


вот код

.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;
}

Как сделать такие закругление угли как на фото? Подскажите пожалуйста

Answer 1

[Ankhena]

На выбор, с псевдо и абсолютом или без него.
https://jsfiddle.net/rchpmf0y/
https://jsfiddle.net/ude1w987/

А ещё лучше гридами: https://jsfiddle.net/4smtphxz/

Comments

[Alisa71]

спасибо большое)

Answer 2

[Дюша Метёлкин]

отправь полностью картинку как должно быть

Comments

[Alisa71]

[Дюша Метёлкин]

Alisa71, да всё уже не надо