Art Deco style border in CSS

Question

I'm looking to achieve this border effect using pure CSS:

My preference would be to achieve it without adding extra div elements. Any suggestions would be appreciated

EDIT: Fixed image description

Answer 1

Try like this:

body {
  margin:0;
  padding:0;
}

.artdeco {
   position: relative;
   margin:20px;
   padding:20px;
   border:2px solid black;
   min-height:300px;
}

.artdeco:before {
   content:'';
   position: absolute;
   top:-20px;
   bottom:-20px;
   left:10px;
   right:10px;
   border-left: 2px solid black;
   border-right: 2px solid black;
}

.artdeco:after {
   content:'';
   position: absolute;
   top:10px;
   bottom:10px;
   left:-20px;
   right:-20px;
   border-top: 2px solid black;
   border-bottom: 2px solid black;
}

<div class="artdeco"></div>

Use psuedoelements to add further rectangles to which the extra borders can be applied.