You cannot do that with a border.
Interestingly though, you can do it with an outline
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
border:12px solid #663399;
outline: 12px solid red;
padding:25px
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}<div class="parent">
<div class="child"></div>
</div>Other Options
Using pseudo-elements
1. Pseudo-element with border
Requires some additional transforms to nudge into place.
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.absolute::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 12px solid red;
}<div class="parent absolute">
<div class="child"></div>
</div>2. Pseudo-element with box-shadow
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.shadow::after {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
box-shadow: 0 0 0 12px red;
}<div class="parent shadow">
<div class="child"></div>
</div>