enter image description here

Hi, is it possible to make a div border masked in specific place like in the picture?
Some kind of div masking another div but without setting a background-color (because a background of a whole site is a gradient).

I don’t want to use an SVG, cause I want to keep border properties still available to use.

Thanks for every answer!

I tried to use pseudo elements with mask property with an black SVG rectangle inside of it but the border is still visible

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 2rem;
  border: 1px solid var(--border-color);
  border-radius: 2vw;
}

.card::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 10px;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask: url("../../assets/rect-mask.svg");
  mask: url("../../assets/rect-mask.svg");
}