box-shadowプロパティの重なりを利用して、縁取りの枠線を作ります。
デモページはこちら

box-shadow: 水平方向の距離 垂直方向の距離 ぼかしの距離 広がりの距離 影の色 inset;

htmlの構造は以下の通りです。

<p>上階層のbox-shadow</p>
<div class="div01">テキストテキストテキストテキスト</div>

<p>下階層のbox-shadow</p>
<div class="div02">テキストテキストテキストテキスト</div>

<p>上階層と下階層のbox-shadowの組み合わせ</p>
<div class="div03">テキストテキストテキストテキスト</div>

まず上階層のbox-shadowです。
縁取りの枠線は右下方向に作成するので、box-shadowの水平方向と垂直方向の距離に8pxを指定します。ぼかしの距離は必ず0にします。ぼかしがあるとくっきりとした枠線になりません。また上階層は広がりの距離も0とします。

//上階層
.div01 {
  margin: 0 0 2em;
  padding: 40px;
  border: 3px solid #161616;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 8px 8px 0 0 #e5f50a;
}

次に下階層のbox-shadowです。
上階層と異なる点は、広がりの距離を3pxとする箇所です。これで上階層からはみ出た3pxがボーダーのように見えます。

//下階層
.div02 {
  margin: 0 0 2em;
  padding: 40px;
  border: 3px solid #161616;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 8px 8px 0 3px #161616;
}

最後に上階層と下階層のbox-shadowの組み合わせです。
box-shadowを複数指定する場合はカンマで区切ります。最初の指定が上階層、2番目の指定が下階層になります。

//上階層, 下階層
.div03 {
  margin: 0 0 2em;
  padding: 40px;
  border: 3px solid #161616;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 8px 8px 0 0 #e5f50a, 8px 8px 0 3px #161616;
}