Any way to limit border length

Question

Is there any way to limit the length of a border  I have a  lt div gt  that has a bottom border  but I want to add a border on the left of the  lt div gt  that only stretches half of the way up    Is there any way to do so without adding extra elements on the page

User · Answer

With CSS properties  we can only control the thickness of border  not length    However we can mimic border effect and control its width and height as we want with some other ways   With CSS  Linear Gradient    We can use linear-gradient   to create a background image s  and control its size and position with CSS so that it looks like a border  As we can apply multiple background images to an element  we can use this feature to create multiple border like images and apply on different sides of element  We can also cover the remaining available area with some solid color  gradient or background image   Required HTML   All we need is one element only  possibly having some class     lt div class  box  gt  lt  div gt    Steps    Create background image s  with linear-gradient    Use background-size to adjust the width   height of above created image s  so that it looks like a border  Use background-position to adjust position  like left  right  left bottom etc   of the above created border s     Necessary CSS    box     background-image  linear-gradient purple  purple                          Above css will create background image that looks like a border                      linear-gradient steelblue  steelblue                          This will create background image for the container     background-repeat  no-repeat        First sizing pair  4px 50   will define the size of the border i e border      will be of having 4px width and 50  height          2nd pair will define the size of stretched background image       background-size  4px 50   calc 100  - 4px  100         Similar to size  first pair will define the position of the border      and 2nd one for the container background      background-position  left bottom  4px 0      Examples   With linear-gradient   we can create borders of solid color as well as having gradients  Below are some examples of border created with this method   Example with border applied on one side only    x000D   x000D   container   x000D    display  flex  x000D    x000D   box   x000D    background-image  linear-gradient purple  purple   x000D                      linear-gradient steelblue  steelblue   x000D    background-repeat  no-repeat  x000D    background-size  4px 50   calc 100  - 4px  100   x000D    background-position  left bottom  4px 0  x000D   x000D    height  160px  x000D    width  160px  x000D    margin  20px  x000D    x000D   gradient-border   x000D    background-image  linear-gradient red  purple   x000D                      linear-gradient steelblue  steelblue   x000D    x000D   lt div class  container  gt  x000D     lt div class  box  gt  lt  div gt  x000D   x000D     lt div class  box gradient-border  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Example with border applied on two sides    x000D   x000D   container   x000D    display  flex  x000D    x000D   box   x000D    background-image  linear-gradient purple  purple   x000D                      linear-gradient purple  purple   x000D                      linear-gradient steelblue  steelblue   x000D    background-repeat  no-repeat  x000D    background-size  4px 50   4px 50   calc 100  - 8px  100   x000D    background-position  left bottom  right top  4px 0  x000D     x000D    height  160px  x000D    width  160px  x000D    margin  20px  x000D    x000D   x000D   gradient-border   x000D    background-image  linear-gradient red  purple   x000D                      linear-gradient purple  red   x000D                      linear-gradient steelblue  steelblue   x000D    x000D   lt div class  container  gt  x000D     lt div class  box  gt  lt  div gt  x000D   x000D     lt div class  box gradient-border  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Example with border applied on all sides    x000D   x000D   container   x000D    display  flex  x000D    x000D   box   x000D    background-image  linear-gradient purple  purple   x000D                      linear-gradient purple  purple   x000D                      linear-gradient purple  purple   x000D                      linear-gradient purple  purple   x000D                      linear-gradient steelblue  steelblue   x000D    background-repeat  no-repeat  x000D    background-size  4px 50   50  4px  4px 50   50  4px  calc 100  - 8px  calc 100  - 8px   x000D    background-position  left bottom  left bottom  right top  right top  4px 4px  x000D     x000D    height  160px  x000D    width  160px  x000D    margin  20px  x000D    x000D   x000D   gradient-border   x000D    background-image  linear-gradient red  purple   x000D                      linear-gradient to right  purple  red   x000D                      linear-gradient to bottom  purple  red   x000D                      linear-gradient to left  purple  red   x000D                      linear-gradient steelblue  steelblue   x000D    x000D   lt div class  container  gt  x000D     lt div class  box  gt  lt  div gt  x000D   x000D     lt div class  box gradient-border  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Screenshot

User · Answer

for horizontal lines you can use hr tag   hr   width  90       but its not possible to limit border height  only element height

User · Answer

CSS generated content can solve this for you    x000D   x000D  div   x000D    position  relative  x000D    x000D   x000D   x000D     Main div for border to extend to 50  from bottom left corner    x000D   x000D  div after   x000D    content      x000D    background  black  x000D    position  absolute  x000D    bottom  0  x000D    left  0  x000D    height  50   x000D    width  1px  x000D    x000D   lt div gt Lorem Ipsum lt  div gt  x000D   x000D   x000D     note - the content      declaration is necessary in order for the pseudo-element to render

User · Answer

The   after pseudo-element rocks    If you play a bit you can even set your resized border element to appear centered or to appear only if there is another element next to it  like in menus   Here is an example with a menu   menu  gt  ul  gt  li       position  relative      float  left      padding  0 10px      menu  gt  ul  gt  li   li  after       content  quot  quot       background   ccc      position  absolute      bottom  25       left  0      height  50       width  1px      x000D   x000D   menu  gt  ul  gt  li     position  relative    float  left    padding  0 10px    list-style  none     menu  gt  ul  gt  li   li  after     content        background   ccc    position  absolute    bottom  25     left  0    height  50     width  1px    x000D   lt div id  menu  gt     lt ul gt       lt li gt Foo lt  li gt       lt li gt Bar lt  li gt       lt li gt Baz lt  li gt     lt  ul gt   lt  div gt  x000D   x000D   x000D

User · Answer

Borders are defined per side only  not in fractions of a side   So  no  you can t do that     Also  a new element wouldn t be a border either  it would only mimic the behaviour you want - but it would still be an element

User · Answer

This is a CSS trick  not a formal solution  I leave the code with the period black because it helps me position the element  Afterward  color your content  color white  and  margin-top -5px or so  to make it as though the period is not there   div yourdivname after   content         border-bottom 1px solid grey    width 60     display block    margin 0 auto

User · Answer

Hope this helps    x000D   x000D   mainDiv   x000D    height  100px  x000D    width  80px  x000D    position  relative  x000D    border-bottom  2px solid  f51c40  x000D    background   3beadc  x000D    x000D   x000D   borderLeft   x000D    border-left  2px solid  f51c40  x000D    position  absolute  x000D    top  50   x000D    bottom  0  x000D    x000D   lt div id  mainDiv  gt  x000D     lt div id  borderLeft  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another way of doing this is using border-image in combination with a linear-gradient    x000D   x000D  div   x000D    width  100px  x000D    height  75px  x000D    background-color  green  x000D    background-clip  content-box     so that the background color is not below the border    x000D     x000D    border-left  5px solid black  x000D    border-image  linear-gradient to top   000 50   rgba 0 0 0 0  50       to top - at 50  transparent    x000D    border-image-slice  1  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    jsfiddle  https   jsfiddle net u7zq0amc 1     Browser Support  IE  11   Chrome  all  Firefox  15   For a better support also add vendor prefixes   caniuse border-image

User · Answer

Another solution is you could use a background image to mimic the look of a left border   Create the border-left style you require as a graphic Position it to the very left of your div  make it long enough to handle roughly two text size increases for older browsers  Set the vertical position 50  from the top of your div    You might need to tweak for IE  as per usual  but it s worth a shot if that s the design you are going for    I am generally against using images for something that CSS inherently provides  but sometimes if the design needs it  there s no other way round it

User · Answer

You can define one border per side only  You would have to add an extra element for that

[css] Any way to limit border length?

With CSS (Linear Gradient):

Examples related to css