contrast-card.vue

<template>
  <div class="contrast_card">
    <div class="top_border"></div>
    <div class="top_side_dot"/>
    <div class="bottom_side_dot"/>
    <div class="bottom_border"></div>
    <div class="card_content">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "ContrastCard"
};
</script>

<style scoped>

.contrast_card {
  position: relative;
  background-color: var(--card-background-color);
}

.top_border {
  height: 33%;
  border-top: 2px solid var(--card-border1-color);
  border-left: 2px solid var(--card-border1-color);
  border-right: 2px solid var(--card-border1-color);
}

.top_side_dot {
  position: relative;
  height: 17%;
}

.top_side_dot::before {
  content: "";
  position: absolute;
  left: -2px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.top_side_dot::after {
  content: "";
  position: absolute;
  right: -2px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.bottom_side_dot {
  position: relative;
  height: 17%;
}

.bottom_side_dot::before {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.bottom_side_dot::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 0;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.bottom_border {
  height: 33%;
  border-left: 2px solid var(--card-border1-color);
  border-right: 2px solid var(--card-border1-color);
  border-bottom: 2px solid var(--card-border1-color);
}

.card_content {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  padding: 0.5rem;
}

</style>