Here is an idea using gradient and CSS variables where you can easily control the shape of your border:
.box {
--b:5px; /* thickness of the border */
--c:red; /* color of the border */
--w:20px; /* width of border */
border:var(--b) solid transparent; /* space for the border */
--g:#0000 90deg,var(--c) 0;
background:
conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
background-size:var(--w) var(--w);
background-origin:border-box;
background-repeat:no-repeat;
/*Irrelevant code*/
width:200px;
height:100px;
box-sizing:border-box;
margin:5px;
display:inline-flex;
font-size:30px;
justify-content:center;
align-items:center;
line-height:90px;
}
<div class="box">
some content
</div>
<div class="box" style="--c:blue;--w:40px;--b:2px">
some content
</div>
<div class="box" style="--c:green;--w:30%;--b:8px">
some content
</div>
<div class="box" style="--c:black;--w:50%;--b:3px">
some content
</div>
<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>
<div class="box" style="--c:orange;--w:calc(50% - 10px);--b:4px">
some content
</div>
You can also have a complex coloration if you combine this with mask:
.box {
--b:5px; /* thickness of the border */
--c:red; /* color of the border */
--w:20px; /* width of border */
padding:var(--b); /* space for the border */
position:relative;
/*Irrelevant code*/
width:200px;
height:100px;
box-sizing:border-box;
margin:5px;
display:inline-flex;
font-size:30px;
justify-content:center;
align-items:center;
line-height:90px;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--c,red);
--g:#0000 90deg,#000 0;
-webkit-mask:
conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
-webkit-mask-size:var(--w) var(--w);
background-origin:border-box;
-webkit-mask-repeat:no-repeat;
mask:
conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
mask-size:var(--w) var(--w);
mask-repeat:no-repeat;
}
<div class="box">
some content
</div>
<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px">
some content
</div>
<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>
<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>
<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>
<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px">
some content
</div>
And why not with radius:
.box {
--b:5px; /* thickness of the border */
--c:red; /* color of the border */
--w:20px; /* width of border */
--r:25px; /* radius */
padding:var(--b); /* space for the border */
position:relative;
/*Irrelevant code*/
width:200px;
height:100px;
box-sizing:border-box;
margin:5px;
display:inline-flex;
font-size:30px;
justify-content:center;
align-items:center;
line-height:90px;
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--c,red);
padding:var(--b);
border-radius:var(--r);
-webkit-mask:
linear-gradient(#fff 0 0) top /calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) bottom/calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) left /var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) right / var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(#fff 0 0) top /calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) bottom/calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) left /var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) right / var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite:exclude;
mask-repeat:no-repeat;
}
<div class="box">
some content
</div>
<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px;--r:40px;">
some content
</div>
<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>
<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>
<div class="box" style="--c:purple;--w:10px;--b:10px;--r:0px">
some content
</div>
<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px;--r:10px">
some content
</div>