How to overflow the content of an anchor tag over it's own border, creating a cut out effect?

Question

I am trying to style an anchor tag like this:

The problem I have is that I am unable to figure out a way to cut out the right border, creating the effect shown in the image. Note that it is important that the button background color is transparent and cuts out the border based on the line-height of the text.

This is what I'm currently able to achieve:

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
}

a::before {
  content: "";
  width: 100px;
  border: 1px solid red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

<a href="#">Neem contact met ons op</a>

Answer 1

A cut-out of the border based on the line height of the text - using mask.

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
}

a::before {
  --border-thickness: 2px;
  content: "";
  width: 100px;
  border: var(--border-thickness) solid red;
  position: absolute;
  inset: 0;
  mask: 
    linear-gradient(black, black),
    conic-gradient(black, black) 100% 50% / var(--border-thickness) 1lh no-repeat;
  mask-composite: subtract;
}

<a href="#">Neem contact met ons op</a>

A cut-out of the border based on the line height of the text - using clip-path.

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
}

a::before {
  --border-thickness: 2px;
  content: "";
  width: 100px;
  border: var(--border-thickness) solid red;
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% 0, 
    100% 0%, 
    100% calc(50% - 0.5lh), 
    calc(100% - var(--border-thickness)) calc(50% - 0.5lh), 
    calc(100% - var(--border-thickness)) calc(50% + 0.5lh), 
    100% calc(50% + 0.5lh), 
    100% 100%, 
    0 100%);
}

<a href="#">Neem contact met ons op</a>

Answer 2

Playing with gradients:

a {
  --t: 2px; /* thickness */

  display: inline-block;
  font-size: 25px;
  color: red;
  text-decoration: none;
  padding: .5em 1em;
  border-image: linear-gradient(90deg,currentColor 50%,#0000 0) 1/var(--t);
  background: linear-gradient(currentColor calc(50% - .5lh), #0000 0 calc(50% + .5lh), currentColor 0) 50%/var(--t) 100% no-repeat
}

<a href="#">Neem contact met ons op</a>

You can add another variable to control the offset:

a {
  --t: 2px; /* thickness */
  --o: 50%;  /* offset */

  display: inline-block;
  font-size: 25px;
  color: red;
  text-decoration: none;
  padding: .5em 1em;
  border-image: linear-gradient(90deg,currentColor var(--o),#0000 0) 1/var(--t);
  background: linear-gradient(currentColor calc(50% - .5lh), #0000 0 calc(50% + .5lh), currentColor 0) var(--o)/var(--t) 100% no-repeat
}

<a href="#">Neem contact met ons op</a>
<br>
<br>
<a href="#" style="--o:20%">Neem contact met ons op</a>
<br>
<br>
<a href="#" style="--o:70%">Neem contact met ons op</a>

Answer 3

Probably easiest, if you assemble the border out of three parts. The element itself gets a border-left only, and then you use two pseudo elements for the top and bottom part, respectively. (I've used different colors here for each part, so you can easily see which is which.)

Play with the top / bottom percentages, if you want the partial borders on the right to be longer / shorter.

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
  border-left: 1px solid green;
}

a::before,
a::after {
  content: "";
  width: 100px;
  position: absolute;
  left: 0;
}

a::before {
  top: 0;
  bottom: 80%;
  border-top: 1px solid red;
  border-right: 1px solid red;
}

a::after {
  top: 80%;
  bottom: 0;
  border-bottom: 1px solid blue;
  border-right: 1px solid blue;
}

<a href="#">Neem contact met ons op</a>