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

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

<div id="style03">
  <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;
    position: relative;
}

#style01 li:after {
    position: absolute;
    border: 1px solid #fff;
    content: "";
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: 8px;
}

#style02 li {
  position: relative;
  list-style: none;
  background: #ffae63;
  width: 23.5%;
  text-align: center;
  padding: 2rem 0;
}

#style02 li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 12px solid #ffffff6e;
    box-sizing: border-box;
}

#style03 {
  position: relative;
  display: inline-block;
}

#style03:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 15px solid rgb(255 62 62 / 40%);
    box-sizing: border-box;
    background: rgb(255 255 255 / 40%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.