[html] Border Height on CSS

I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:

table td {
    border-right:1px solid #000;
}

It works fine but the problem is that the border's height takes the total TD's height.

Is there a way to set the height of the border?

table td {
    border-right:1px solid #000;
    height: 100%;
}

Just you add height under the border property.

For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.

For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.

Here is a working example of both: http://jsfiddle.net/byronj/gLcqu6mg/

An example with list items:

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

//draws a line on right side of the box. later add a margin-top and margin-bottom. i.e.,

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

This might help in drawing a line on the right-side of the box with a gap on top and bottom.

Yes, you can set the line height after defining the border like this:

border-right: 1px solid;
line-height: 10px;

Building on top of @ReBa's answer above, this custom-border class is what worked for me.

Mods:

• working with border instead of backaground-color since background-color is not consistent.
• Setting height & top of the properties of :after in such a way that the total comes up to 100% where bottom's value is implicit.

ul {_x000D_
  list-style-type: none;_x000D_
  display: flex;_x000D_
  flex-direction: row;_x000D_
}_x000D_
_x000D_
li {_x000D_
  padding: 10px;_x000D_
}_x000D_
_x000D_
.custom-border {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.custom-border:after {_x000D_
  content: " ";_x000D_
  position: absolute;_x000D_
  border-left: 1px #6c757d solid;_x000D_
  top: 35%;_x000D_
  right: 0;_x000D_
  height: 30%;_x000D_
  margin-top: auto;_x000D_
  margin-bottom: auto;_x000D_
}

<ul>_x000D_
  <li class="custom-border">_x000D_
    Hello_x000D_
  </li>_x000D_
  <li class="custom-border">_x000D_
    World_x000D_
  </li>_x000D_
  <li class="custom-border">_x000D_
    Foo_x000D_
  </li>_x000D_
  <li class="custom-border">Bar</li>_x000D_
  <li class="custom-border">Baz</li>_x000D_
</ul>

Good Luck...

This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentation here.

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}

Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.

No, you cannot set the border height.

table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

Then with your code you can:

<td class="rightborder">whatever</td>

Hope that helps!

I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.

It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

I hope this helps you too, as for me, this is an easy workaround.

Just like everyone else said, you can't control border height. But there are workarounds, here's what I do:

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border. Remember, inherit has no effect when the table height isn't set.

Use height: 50% for half a border.

Demo