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?

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
}

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;

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

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

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>

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

No, you cannot set the border height.

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

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

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!

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.

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

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

Just you add height under the border property.