ボックス装飾デザインのサンプルです。タグの種類（div section articleなど）やclass名、色などは適宜変更してください。
以下サンプルをもとに、いろいろいじってみるのもたのしいと思います。

ボックス装飾サンプル1

下側の区切りを「切り取り線」にした装飾

ボックス装飾サンプル

<div class="box"><p>ボックス装飾サンプル</p></div>

.box {
  padding-bottom: 1.5em;
  border-bottom: 1px dashed #454545;
  position: relative;
}

.box::after {
  content: '\2702';
  padding: 0 0.5em;
  color: #454545;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 5em;
  transform: translateY(50%);
  display: inline-block;
}

見た目が少しわかりづらいですが、div要素で囲っています。

ボックス装飾サンプルサンプル2

擬似的に背景が透けて見えるような装飾

ボックス装飾サンプルサンプル

ボックス装飾のHTMLとCSSサンプルです。
ボックス装飾のHTMLとCSSサンプルです。
ボックス装飾のHTMLとCSSサンプルです。

<div class="box">
  <p>ボックス装飾サンプルサンプル</p>
  <p>ボックス装飾のHTMLとCSSサンプルです。<br>
  ボックス装飾のHTMLとCSSサンプルです。<br>
  ボックス装飾のHTMLとCSSサンプルです。</p>
</div>

.box {
  margin-right: 10px;
  padding: 1.5em 1.5em 1.5em 2em;
  border: 1px solid #454545;
  position: relative;
}

.box::after {
  content: '';
  background-color: #ebebef;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10px;
  right: -10px;
  display: inline-block;
  z-index: -1;
}

背景色がはみ出す分、ボックスの横幅はmargin-rightで同じだけ調整しています。

ボックス装飾サンプルサンプル3

外側にさらに縁をつけた装飾

ボックス装飾サンプルサンプル

ボックス装飾のHTMLとCSSサンプルです。
ボックス装飾のHTMLとCSSサンプルです。
ボックス装飾のHTMLとCSSサンプルです。

<div class="box">
  <p>ボックス装飾サンプルサンプル</p>
  <p>ボックス装飾のHTMLとCSSサンプルです。<br>
  ボックス装飾のHTMLとCSSサンプルです。<br>
  ボックス装飾のHTMLとCSSサンプルです。</p>
</div>

.box {
  margin-inline: 10px;
  padding: 1.5em;
  background-color: #ebebef;
  border: 1px dashed #454545;
  outline: 10px solid #ebebef;
}

枠（border）のさらに外側に縁（outline）をつけています。
outlineで指定した太さの分だけ長さが横に延びるので、コンテンツ幅と揃えるにはmargin-inlineで左右同じ長さで指定して調整します。
borderの種類や太さを変えると、雰囲気がちょっと違って見えます。

ボックス装飾サンプルサンプル4

カギ括弧で縁取ったような装飾

ボックス装飾サンプルサンプル

ボックス装飾のHTMLとCSSサンプルです。
ボックス装飾のHTMLとCSSサンプルです。
ボックス装飾のHTMLとCSSサンプルです。

<div class="box">
  <p>ボックス装飾サンプルサンプル</p>
  <p>ボックス装飾のHTMLとCSSサンプルです。<br>
  ボックス装飾のHTMLとCSSサンプルです。<br>
  ボックス装飾のHTMLとCSSサンプルです。</p>
</div>

.box {
  padding: 1.5em;
  background-color: #ebebef;
  position: relative;
}

.box::before,
.box::after {
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  display: inline-block;
}

.box::before {
  border-top: 3px solid #454545;
  border-left: 3px solid #d5393e;
  top: 0;
  left: 0;
}

.box::after {
  border-bottom: 3px solid #d5393e;
  border-right: 3px solid #454545;
  bottom: 0;
  right: 0;
}