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

User · Answer

table    border-spacing  10px 0px      rightborder   border-right  1px solid  fff      Then with your code you can    lt td class  rightborder  gt whatever lt  td gt    Hope that helps

User · Answer

table td       border-right 1px solid  000      height  100       Just you add height under the border property

User · Answer

Yes  you can set the line height after defining the border like this   border-right  1px solid  line-height  10px

User · Answer

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

User · Answer

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

User · 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

User · Answer

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

User · Answer

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  amp  top of the properties of  after in such a way that the total comes up to 100  where bottom s value is implicit     x000D   x000D  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    x000D   lt ul gt  x000D     lt li class  custom-border  gt  x000D      Hello x000D     lt  li gt  x000D     lt li class  custom-border  gt  x000D      World x000D     lt  li gt  x000D     lt li class  custom-border  gt  x000D      Foo x000D     lt  li gt  x000D     lt li class  custom-border  gt Bar lt  li gt  x000D     lt li class  custom-border  gt Baz lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Good Luck

User · Answer

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       lt ul gt       lt li gt cats lt  li gt       lt li gt dogs lt  li gt       lt li gt birds lt  li gt       lt li gt swine  lt  li gt   lt  ul gt

User · Answer

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  lt span gt   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

User · Answer

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

User · Answer

No  you cannot set the border height

[html] Border Height on CSS

Examples related to html

Examples related to css