Border Height on CSS

Question

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;
}

Answer 1

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

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

Answer 2

No, you cannot set the border height.

Answer 3

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

Answer 4

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.

Answer 5

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 {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}

<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

Good Luck...

Answer 6

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.