Border Height On CSS

Answer :

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.

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;