Что не так с border'ом и как это исправить?

Question

[NAHB]

Хотел получить что-то вроде внутренней тёмной рамки.

JSFiddle

<section class="about-us">
  <div class="about-us-img">
    <div class="about-us-img-gradient"></div>
  </div>
</section>

* {
	margin: 0;
	padding: 0;
	font-size: 0;
	box-sizing: border-box;
}
.about-us {
	padding: 50px 0;
	display: flex;
	justify-content: center;
}
.about-us-img {
	background-image: url(https://svgshare.com/i/McT.svgg);
}
.about-us-img-gradient {
	width: 555px;
	height: 700px;
	background-image: linear-gradient(to top, rgba(252, 95, 69, 0.29) 0%, rgba(0, 0, 0, 0) 100%);
	border: 10px solid rgba(0, 0, 0, 0.2);
}

upd. Я сейчас вроде как нашёл решение, но не уверен, правильно ли сделал и стоило ли создавать ещё один div. Вот.

Comments

[Антон]

Не совсем понятно, что должно получиться в итоге. Если просто тёмная рамка, то указывайте цвет рамки без opacity.
То есть не rgba(0, 0, 0, 0.2), а rgba(0, 0, 0) (или #000).

[NAHB]

Антон Алексеевич, Должно быть так, чтобы сверху и снизу рамка была как слева и справа.

[Антон]

NAHB, по поводу Вашего "upd": да, тоже хороший вариант.

Answer 1

[artem]

Используй заместо border
box-shadow: inset 0 0 1px #black;
Таким образом у тебя будет внутренняя рамка.

Comments

[NAHB]

Ответ отличный, хотя код не очень правильный, потому что там не блюр (размытие) нужен, а растяжение. Хорошо, что я не сдался и понял как это сделать. JSFiddle.

Answer 2

[kyzinatra]

.about-us-img-gradient{
box-shadow: inset 0 0 0 (размер рамки)px black; - для четкой рамки
box-shadow: inset 0 0 (размер рамки)px black; - для размытой, красивой рамки
}