Border Height on CSS
HtmlCssHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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;
Solution 3 - Html
Yes, you can set the line height after defining the border like this:
border-right: 1px solid;
line-height: 10px;
Solution 4 - Html
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>
Solution 5 - Html
No, you cannot set the border height.
Solution 6 - Html
custom-border
class is what worked for me.
Building on top of @ReBa's answer above, this Mods:
- working with
border
instead ofbackaground-color
sincebackground-color
is not consistent. - Setting
height
&top
of the properties of:after
in such a way that the total comes up to100%
wherebottom
'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...
Solution 7 - Html
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;
}
Solution 8 - Html
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.
Solution 9 - Html
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!
Solution 10 - Html
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.
Solution 11 - Html
.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.
Solution 12 - Html
table td {
border-right:1px solid #000;
height: 100%;
}
Just you add height under the border property.