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,...).

I'd say this is near impossible to achieve only with css and without markup changes or using tricks specific to the css/html on your site. — kontur, Jan 10 '12 at 14:05
@Drewdin and Casey what do you need code for? The question is simple: it's about a div and a border. — Mr Lister, Jan 10 '12 at 14:06
My bad guys, I'm not asking for anything specific, just if it's even possible to accomplish this using only CSS. The code would look something like this: HTML:
CSS: #holder { border: 1px solid #000; height: 200px; width: 200px; } — , Jan 10 '12 at 14:07
you need border gradient for this check out this links to achieve this http://stackoverflow.com/questions/2717127/css3-gradient-borders — Bipin Chandra Tripathi, Jan 10 '12 at 14:10
@MrLister providing code shows effort and creates a framework so that everyone is on the same page. — Casey Robinson, Jan 10 '12 at 16:45
I cannot see what code he could provide besides `1px solid #000;`. — RSinohara, Jul 31 '16 at 15:57

leo · Answer 1 · 2023-02-13T13:32:29.503

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:

Half of a top border visible above the text "Hello world"

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 · 2022-04-08T10:26:13.663

35

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>

edited Apr 08 '22 at 10:26

answered Jul 07 '21 at 09:54

红了樱桃绿了吧唧

495
4
7

2

This is by far the most elegant answer. A more general answer might use transparent instead of white. – Alex Feb 23 '22 at 01:09
no use of position absolute, this is perfect answer – Utkarsh Tyagi Jun 01 '22 at 19:40
Best answer, very precise. It worked for me. – hdev Aug 22 '22 at 07:29
Exactly what I needed, thanks for this elegant and simple solution :) – Glioburd May 02 '23 at 09:18

score 31 · Answer 3 · edited Apr 01 '15 at 10:22

31

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>

edited Apr 01 '15 at 10:22

niyasc

4,440
1
23
50

answered Jan 10 '12 at 14:19

jeanreis

898
8
20

This is showing only the second half instead of hidding it, but you get the idea, just change the position. – jeanreis Jan 10 '12 at 14:23
So simple and beautiful! Well done. Great to use for nav button underline styling! – Jonathan La'Fey Jun 24 '16 at 13:18
What if you wanted a transparent background behind it? – dwjohnston Nov 21 '19 at 03:25
You're an MVP, what a champ! – JGCW Apr 02 '20 at 12:04

score 1 · Answer 4 · answered Sep 09 '15 at 17:39

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,

score -4 · Answer 5 · answered Feb 20 '18 at 13:09

-4

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>

answered Feb 20 '18 at 13:09

Veerendra Kumar Nagella

11

CSS - Border where only half of a border is visible

5 Answers5

Linked

Related