html - CSS - Border where only half of a border is visible

Question

I am confused as to have to make it work in CSS only to have a div where the border would be only visible on half it's width.

The border style is a simple 1px solid #000;

However, I want the top of the div's border to not be visible everywhere (on 100% on the div's width), rather only on the first 50% of the div's width.

I haven't been able to get an example of this anywhere, and it needs to be in percentages, so the usual bag of tricks (image over the second half,...).

Answer 1

Would this work:

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top:-1px;
        left:1px;
        width:50%;
        height: 1px;
        background-color:#fff;
}

<div id="holder">
        <div id="mask"></div>
</div>