Rectangle border with specific length - html

Question

I'm trying to create the following using html and css
It's rectangle with with border that has specific length, starting from top center,
the length around the rectangle should specify with percentage,
so the left rectangle should have border with length of 30%, the right should have 45% more or less.
I tried many things like gradient without success

Answer 1

.box {
height: 150px;
width: 150px;
background-color: red;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.box-top {
display: block;
position: absolute;
background-color: blue;
height: 8px;
border-radius: 200px;
top: 0;
right:0;
left: 40%;
bottom: 0;
}
.box-right {
display: block;
position: absolute;
background-color: blue;
width: 8px;
height: 100%;
border-radius: 200px;
top: 0;
right:0;
bottom: 0;
}
.box-bottom {
display: block;
position: absolute;
background-color: blue;
height: 8px;
border-radius: 200px;
right:0;
left: 60%;
bottom: 0;
}
<div class="box">
<div class="box-top"></div>
<div class="box-right"></div>
<div class="box-bottom"></div>
</div>
You can style as much as you like this is just to give to a rough idea how you might approach this. And there can be more than 1 ways to do it.
Like I can see your outline is not inside the box but a few pixels out of it, and you can do that by tweaking the position values.

Answer 2

You can achieve that effect using some before or after pseudo elements.
I've given a simple way to do that below.
.box {
height: 150px;
width: 150px;
background-color: red;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.box::before, .box::after {
content: '';
display: block;
position: absolute;
background-color: transparent;
pointer-events: none;
}
.box::before {
top: 0;
right:0;
left: 40%;
bottom: 0;
border-top: 8px solid blue;
border-right: 8px solid blue;
}
.box::after {
top: 0;
right:0;
left: 60%;
bottom: 0;
border-bottom: 8px solid blue;
}
<div class="box"></div>

Answer 3

<svg viewBox="0 0 500 500">
<style>
#curve {
fill:#0004;
box-shadow:0 0 0 8px #0004;
}
.border{
letter-spacing:-5px;
fill:crimson;
}
</style>
<path id="curve" fill="transparent" d="m100 50,h50,a25 25 0 0 1 25 25,v100,a25 25 0 0 1 -25 25,h-100,a25 25 0 0 1 -25 -25,v-100,a25 25 0 0 1 25 -25" />
<text width="500">
<textPath xlink:href="#curve" class="border">
••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
</textPath>
</text>
</svg>
This isn't possible with only html and css. If you'd make the border with box-shadow: inset 0 0 0 5px, you could use another element on top of it with a conic-gradient with hard color stops to hide the unwanted parts of the box-shadow. The percentage for the color-stops determines how much is shown.
The rounded corners on the line aren't possible like this.