JSFiddle - React, Tailwind, and code Playground

HTML

<div class="multiborder">
    <div class="top-border-1"></div>
    <div class="top-border-2"></div>
</div>

CSS

.multiborder{
    border:1px solid black;
    border-top:none;
    width:500px;
    height:100px;
    position:relative;
    margin:8px;
}
.top-border-1{
    border-top:2px solid red;
    width:100px;
    position:absolute;
    top:0px;
    right:0px;
}
.top-border-2{
    border-top:3px double blue;
    width:300px;
    position:absolute;
    top:0px;
    left:0px;
}