CSS Border-Left 50% Height

css border-left 50% height

Good question. It's not possible using the border property.

The only thing that comes to mind, if you can set your div's position to relative, is to use an absolutely positioned, 1 pixel wide div. Not thoroughly tested but this should work:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
  
</div>

You'd do the same on the right hand side, replacing the left property by right.

Remember, the surrounding div needs to be position: relative for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.

border height 50 % in my div height using css how?

You can have something like below approach. adding a pseudo element with a white background

.sing-wrapper:after {
  content: '';
  height: 50%;
  width: 3px;
  position: absolute;
  left: -3px;
  top: 0; 
  background-color: white;
}

.sing-wrapper {    border-left: 3px solid #999;     border-bottom: 3px solid #999;    height:10%;    width:220px;    padding: 10px;    border-bottom-left-radius: 25px;    display: inline-table;    position: relative;}
.sing-wrapper:after {  content: '';  height: 50%;  width: 3px;  position: absolute;  left: -3px;  top: 0;   background-color: white;}
.cmpny-label{   display: inline-block;    position: absolute;    right: 0;    padding-left: 5px;    background-color:#FFF;}

<div class="sing-wrapper"><div style="width:100%;height:100%;">
Hello Friends Sign  <br>Hello Friends Sign  <br>Hello Friends Sign  <br>Hello Friends Sign  <br>Hello Friends Sign  <br>
</div><div class="cmpny-label"> <i style="color:#ccc;"> Signed With my Company</div></div>

Border Height on CSS

No, there isn't. The border will always be as tall as the element.

You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:

background:url(line.png) bottom right no-repeat;

I want give 50% left border of my div

Do you try to make something like this ?

.testinomila-post{  position: relative;    width: 350px;    float: left;    text-align: center;    text-align: center;    margin-left: 60px;    margin: auto;    margin-left: 20px;    padding: 40px;    list-style: none;}
.testinomila-post:before {  content : "";  position: absolute;  left    : 0;  bottom  : 0;  height  : 100%;  width   : 1;  /* or 100px */  border-left: 1px solid magenta;  display: block;  box-sizing: border-box;}

<div class="testinomila-post">
</div><div class="testinomila-post">
</div><div class="testinomila-post">
</div>

Any way to limit border length?

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

How can i make a border-left taking not 100% of left border, but smaller in height?

This is my idea, you can add a absolute positioned div to the height you want and then add the required border.

#thirdcolumnfooter {
  vertical-align: top;
  padding-right: 5%;
  display: inline-block;
}

#fourthcolumnfooter {
  padding-left: 5%;
  display: inline-block;
  position: relative;
}

.temp {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  border-color: #EAAC00;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
}

<div id="thirdcolumnfooter">

  <div class="container">
    <h5>FAST SHIPPING</h5>
  </div>

</div>

<div data-element_type="column" id="fourthcolumnfooter">

  <div class="firstrow">
    <h5>YOUR CART</h5>
  </div>

  <div class="secondrow">
    <span>VIEW CART</span>
  </div>
  <div class="temp"></div>

</div>

How to control border height?

A border will always be at the full length of the containing box (the height of the element plus its padding), it can't be controlled except for adjusting the height of the element to which it applies. If all you need is a vertical divider, you could use:

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

With css:

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

Demo at JS Fiddle, adjust the height of the span.container to adjust the border 'height'.

Or, to use pseudo-elements (::before or ::after), given the following HTML:

<div id="left">content</div>
<div id="right">content</div>

The following CSS adds a pseudo-element before any div element that's the adjacent sibling of another div element:

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

JS Fiddle demo.

border-left in css when % is used for width not working

It works. The problem is both leftSide and rightSide elements don't have any height. If you set a height for it, or add some content you'll see.

#box4 {  width: 100%;  height: 80%;  background-color: gray;  float: left;}#leftSide { width: 50%;}#rightSide { left: 50%; width: 50%; border-left: 1px solid #cdd0d4;}#leftSide, #rightSide { position:absolute; }

<div id="box4">  <div id="leftSide">1</div>  <div id="rightSide">2</div></div>

border only half the side of a div

If by adding a second div you mean no write it in the html you can simply use the ::after css property on your div like this:

div {  width: 100px;  height: 150px;  background: black;  position: relative;}
div::after {  content: "";  position: absolute;  width: 3px;  right: -3px;  height: 60%;  background: red;  top: 50%;  transform: translate(-50%, -50%);}

<div></div>

---

Related Topics