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

画像装飾サンプル1

写真っぽい感じの装飾

<figure class="img"><img src="画像URL" width="300" height="200" alt="ダミー画像"></figure>

.img {
  margin-inline: auto;
  width: fit-content;
}

.img img {
  border: 8px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

画像装飾サンプル2

背景にストライプを敷いた装飾

<figure class="img"><img src="画像URL" width="300" height="200" alt="ダミー画像"></figure>

.img {
  margin-inline: auto;
  width: fit-content;
  position: relative;
}

.img::after {
  content: '';
  background: repeating-linear-gradient(-45deg, #ebebef 0 2px, #fff 2px 6px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  z-index: -1;
}

topをbottomにすると、下方向に配置されます。

画像装飾サンプル3

ステッチのような装飾

<figure class="img"><img src="画像URL" width="300" height="200" alt="ダミー画像"></figure>

.img {
  margin-inline: auto;
  width: fit-content;
  position: relative;
}

.img::before {
  content: '';
  margin: auto;
  border: 2px dashed #fff;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  inset: 0;
  display: inline-block;
}

borderの種類や色を変えると、すこし雰囲気が変わります。

画像装飾サンプル4

背景に色を敷いて、画像を重ねたような装飾

<figure class="img"><img src="画像URL" width="300" height="200" alt="ダミー画像"></figure>

.img {
  margin-inline: auto;
  width: fit-content;
  position: relative;
}
.img::after {
  content: '';
  background-color: #d5393e;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-5deg);
  display: inline-block;
  z-index: -1;
}

transform: rotate(-5deg)の数値を正の数にすると、回転が逆になります。