JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background-border">

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quisquam eius maxime quibusdam reprehenderit sapiente ratione, facilis ipsam illo soluta atque consequatur maiores in dolorum nam accusamus totam veritatis tenetur!
</p>

</div>

<br>

<div class="background-border">
<a href=""><img src="https://senseiminimal.github.io/Dragonic/img/Dragonic.jpg"></a>


</div>

CSS

img {
  max-width: 100%;
}

.background-border {
  position: relative;
  color: white;
	box-shadow: 0 1px 15px rgba(0, 0, 0, .75);
  background-color: #000;

	


}
.background-border::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:

	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/left-top-corner.png') left -1px top -1px no-repeat,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/right-top-corner.png') right -1px top -1px no-repeat,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/left-bottom-corner.png') left bottom no-repeat,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/right-bottom-corner.png') right bottom no-repeat,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/top-horizontal-bar.png') left top repeat-x,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/bottom-horizontal-bar.png') left bottom repeat-x,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/left-vertical-bar.png') left bottom repeat-y,
	url('https://us.diablo3.com/static/images/reaper-of-souls/ui/media-frame/right-vertical-bar.png') right top repeat-y;
  pointer-events:  none;
}