Uneven Border on Corners - html

Question

How could I create a border somewhere among the lines of this?
I've tried using linear gradients for backgrounds (found here) but can't seem to get it to draw the shape I'm looking for.

Answer 1

You could use before and after pseudo elements on the main element to create a background. One would be a red rectangle, and in front of it a white rectangle with CSS clip-path used to get the shape.
Here's an example. Obviously change the % values to be what you want (could be px if that is required).
body {
background: black;
width: 100vw;
height: 100vh;
}
div {
width: 30vmin;
height: 50vmin;
display: inline-block;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
div::before,
div::after {
position: absolute;
content: '';
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
div::before {
background: red;
}
div::after {
background: white;
clip-path: polygon(5% 5%, 50% 0, 95% 5%, 100% 30%, 100% 70%, 95% 95%, 70% 100%, 30% 100%, 5% 95%, 0 70%, 0 30%);
}
<div></div>

Answer 2

If you are looking for a gradient, here is an idea using conic-gradient. All you have to do is adjust a few variables to control the shape
.box {
--size: 15px;
--angle: 250deg;
--g: red var(--angle), lightblue 0; /* the colors here */
background:
conic-gradient(from calc(var(--angle)/-2 - 45deg)
at top var(--size) left var(--size),var(--g)) top left,
conic-gradient(from calc(var(--angle)/-2 + 45deg)
at top var(--size) right var(--size),var(--g)) top right,
conic-gradient(from calc(var(--angle)/-2 - 135deg)
at bottom var(--size) left var(--size),var(--g)) bottom left,
conic-gradient(from calc(var(--angle)/-2 + 135deg)
at bottom var(--size) right var(--size),var(--g)) bottom right;
background-size: 51% 51%;
background-repeat: no-repeat;
width: 300px;
height: 300px;
display: inline-block;
}
<div class="box"></div>
<div class="box" style="--size:10px; --angle: 255deg"></div>