<div class="card">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ducimus!
</div>
* {
  box-sizing: border-box;
}

body  {
  background-image: url(https://picsum.photos/id/471/800);
}

.card {
  padding: 10px 15px;
  width: 200px;
  height: 200px;
  position: relative;
  backdrop-filter: blur(15px);
  clip-path: polygon(10px 0, 190px 0, 200px 10px, 200px 190px, 190px 200px, 10px 200px, 0 190px, 0 10px)
}

.card::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: red;
  pointer-events: none;
  clip-path: polygon(evenodd, 10px 0, 190px 0, 200px 10px, 200px 190px, 190px 200px, 10px 200px, 0 190px, 0 10px, 10px 5px, 190px 5px, 195px 10px, 195px 185px, 185px 195px, 10px 195px, 5px 190px, 5px 10px)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.