Two borders overlapping with different sizes

Question

Is there any better way of setting two borders like in the example below? I could only do it with positioning. I'm new here so I apologize for any mistakes whatsoever.

.border1 {
  margin: 0 auto;
  height: 300px;
  width: 250px;
  border: 9px solid red;
  position: relative;  
}

.border2 {
  border: 9px solid blue;
  height: 250px;
  width: 300px;
  position: absolute;
  top: 12px;
  left: -33px;
}

<div class="border1">
  <div class="border2"></div>
</div>

Answer 1

Absolute is indeed a good and easy way here.

You can also use a pseudo and only coordonates to size the second border box.

.border1 {
  margin: 0 auto;
min-height: 150px;/* allow it to grow */
  width: 250px;
  padding:20px 0.5em;
  border: 9px solid red;
  position: relative;
}

.border2:before {
content:'';
  border: 9px solid blue;
pointer-events:none;/* to allow clicking through else you may use a negative z-index */
  position: absolute;
  top: 12px;
bottom:12px;
  left: -33px;
right:-33px;
}

<div class="border1 border2">
add anything here instead setting height
</div>