Сделать двойную рамку со сдвигом?

p { 
  position: relative; 
  border: 1px solid; 
  padding: 1em .5em .5em 1em; 
  margin: .5em 1em 1em .5em; 
  float: left; 
} 
 
p:before { 
  content: ""; 
  position: absolute; 
  left: .5em; 
  top: .5em; 
  width: 100%; 
  height: 100%; 
  z-index: -1; 
  border: inherit; 
  box-sizing: content-box; 
}

<p>Сделать двойную рамку со сдвигом?</p>

.dd { 
    padding: 10px; 
    border: 2px solid blue; 
    width: 400px; 
    height: 80px; 
    overflow: hidden; 
    box-sizing: border-box; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
} 
.bb { 
    margin-top: 10px; 
    margin-left: 10px; 
    position: relative; 
} 
.dd:after { 
    border: 2px solid #FF5722; 
    width: 400px; 
    height: 80px; 
    box-sizing: border-box; 
    position: absolute; 
    top: -10px; 
    left: -10px; 
    content: ''; 
}

<div class="bb"> 
<div class="dd">Текст</div> 
</div>