CODEWITHSUNDEEP
htmlcss
user1096269
user1096269

Reputation:

CSS - Border where only half of a border is visible

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

Upvotes: 52

Views: 129057

Answers (4)

leo
leo

Reputation: 8520

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.

Upvotes: 36

红了樱桃绿了吧唧
红了樱桃绿了吧唧

Reputation: 634

You can use CSS gradient border

half of 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>

Upvotes: 49

kadibra
kadibra

Reputation: 99

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,

Upvotes: 1

jeanreis
jeanreis

Reputation: 908

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>

Upvotes: 32

Related Questions