Any way to limit border length?

Css

Css Problem Overview

Is there any way to limit the length of a border. I have a <div> that has a bottom border, but I want to add a border on the left of the <div> that only stretches half of the way up.

Is there any way to do so without adding extra elements on the page?

Css Solutions

Solution 1 - Css

CSS generated content can solve this for you:

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}


<div>Lorem Ipsum</div>

(note - the content: ""; declaration is necessary in order for the pseudo-element to render)

Solution 2 - Css

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}


<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

Solution 3 - Css

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 > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li::after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}


#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li::after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}


<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Solution 4 - Css

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

<div class="box"></div>

Steps:

  1. Create background image(s) with linear-gradient().
  2. Use background-size to adjust the width / height of above created image(s) so that it looks like a border.
  3. 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:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}


<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Example with border applied on two sides:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}


<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Example with border applied on all sides:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}


<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Screenshot:

Output Image showing half length borders

Solution 5 - Css

for horizontal lines you can use hr tag:

hr { width: 90%; }

but its not possible to limit border height. only element height.

Solution 6 - Css

Another way of doing this is using border-image in combination with a linear-gradient.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}


<div></div>

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][1]

[1]: http://caniuse.com/#feat=border-image "caniuse"

Solution 7 - Css

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.

Solution 8 - Css

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

Article about this issue: https://www.steckinsights.com/shorten-length-border-bottom-pure-css/

Solution 9 - Css

Another solution is you could use a background image to mimic the look of a left border

  1. Create the border-left style you require as a graphic
  2. Position it to the very left of your div (make it long enough to handle roughly two text size increases for older browsers)
  3. 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.

Solution 10 - Css

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

Categories
Recommended Css Solutions

Previous Solution:

Show constraints on tables command

MysqlForeign Keys

Next Solution:

What is the result of % in Python?

PythonPython 2.7SyntaxOperatorsModulo

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmcbeavView Question on Stackoverflow
Solution 1 - CssTrevCView Answer on Stackoverflow
Solution 2 - CsssObrView Answer on Stackoverflow
Solution 3 - Cssuser2397120View Answer on Stackoverflow
Solution 4 - CssMohammad UsmanView Answer on Stackoverflow
Solution 5 - CssEdmhsView Answer on Stackoverflow
Solution 6 - CssDaniel Z.View Answer on Stackoverflow
Solution 7 - CssBenView Answer on Stackoverflow
Solution 8 - CssJustin MunceView Answer on Stackoverflow
Solution 9 - CssKevinView Answer on Stackoverflow
Solution 10 - CssSimonView Answer on Stackoverflow