How to make such a frame?

Question

css

It is necessary to lay out the following link/button:

Code: It is
<a href="#">Link text</a>
interesting to learn from the community how it would be most correct to implement this border.
So far I see 2 solutions:
1. border-image, I don't like the fact that the button will turn out to be of fixed size.
2. Create inside the container 2 50% width divs with absolute positioning and for each set a frame of its own color. The left, of course, without border-right, and the right without border-left. This solution is not liked because it looks overloaded.
What is the most concise way to solve this problem you could share?
UPD Thanks to everyone who answered the question. All options are working, but I liked the trick with the use of peudo-classes the most, and marked it with a solution.

Answer 1

For example, through one pseudo -element
jsfiddle.net/8qfs2vnk

Answer 2

Linear-gradient

Answer 3

It is possible through pseudo -classes jsfiddle.net/straj/oh9a1kaq

Answer 4

1.linear-gradient.
2. Can be implemented through pseudo-classes.

Answer 5

Two elements: ± here ±