<div class="shapes">
  <div class="hexogon">
  <img src="https://placekitten.com/300/300" class="hexogon__media">
</div>

<div class="hexogon hexogon--light">
  <img src="https://placekitten.com/500/500" class="hexogon__media">
</div>
</div>

/* https://css-tricks.com/cutting-inner-part-element-using-clip-path/ */
.hexogon {
  --border: 12px;
  --border-color: rgba(0, 0, 0, 0.4);
  /* Tangent of 30 degrees */
  --tangent: 0.577;
  --indent: var(--border) * var(--tangent);
  position: relative;
  width: 300px;
  height: 300px;
  clip-path: polygon(21% 0%, 79% 0%, 100% 50%, 79% 100%, 21% 100%, 0% 50%);
}
.hexogon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    /* 21% ≈ (100% - 50% / sin(60deg)) / 2 */
    21% 0%,
    79% 0%,
    100% 50%,
    79% 100%,
    21% 100%,
    0% 50%,
    21% 0%,
    
    calc(21% + var(--indent)) var(--border),
    var(--border) 50%,
    calc(21% + var(--indent)) calc(100% - var(--border)),
    calc(79% - var(--indent)) calc(100% - var(--border)),
    calc(100% - var(--border)) 50%,
    calc(79% - var(--indent)) var(--border),
    calc(21% + var(--indent)) var(--border)
  );
  background-color: var(--border-color);
  z-index: 1;
}

.hexogon--light {
  --border: 16px;
  --border-color: rgba(0, 0, 0, 0.25);
}

.hexogon__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}