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

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

If you do not want to mess with the HTML at all, you can do it with an empty pseudoelement, using CSS only. You still need to know the background color, of course (assuming white here):
<span class="half-a-border-on-top">Hello world!</span>
<style>
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
background-color:white;
position: absolute;
right:0;
top:-1px;
}
</style>
Result:
Snippet
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;
background-color:white;
position: absolute;
right:0;
top:-1px;
}
<span class="half-a-border-on-top">Hello world!</span>
Fiddle:
http://jsfiddle.net/vL1qojj8/
Edit 2023: Now that even Safari seems to fully and properly support linear-gradient, the answer by 红了樱桃绿了吧唧 is probably more elegant, and will work without knowing the background color.

Answer 2

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>

Answer 3

You can use CSS gradient border
.half-a-border-on-top {
border-top: 1px solid;
border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}
<span class="half-a-border-on-top">Hello world!</span>

Answer 4

let show you how i edit the code of leo, to put a half border at left in center.
try this:
html code
<div class="half-a-border-on-left">Hello world!</div>
css code
<style>
.half-a-border-on-left {
border-left: 1px solid black;
position: relative;
height: 50px;
background: red;
}
.half-a-border-on-left:after {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left:-1px;
top: -10px;
}
.half-a-border-on-left:before {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left: -1px;
bottom: -5px;
}
</style>
Those are code i use to put a half border thank you leo,

Answer 5

I love Hyderabad
***
.div_1 {
width: 50px;
border-bottom: 2px solid black;
}
.div_2 {
width: max-content;
margin-bottom: 10px;
}
<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>