<ul id="style01">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

<div id="style02">
  <img src="https://www.nan-demo.work/wp-content/uploads/2022/06/image01.jpg">
</div>
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
}

#style01 li {
  text-align: center;
  width: 23.5%;
  background:#000;
  color: #fff;
  padding: 2rem 0;
  outline: 10px solid #ccc;
  outline-offset: -10px;
}

#style02 img {
  width: 640px;
  outline: 15px solid rgb(255 255 255 / 40%);
  outline-offset: -15px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.