How to Limit Border Length with CSS

Sometimes, you may need to make a border shorter than its parent element. To overcome this, use CSS properties and HTML elements. We’ll use border properties along with elements such as <span>, <div>, or pseudo-elements.

The solution is straightforward. Create a child <div> inside the parent <div> and apply the border to the child. By default, the child div is transparent, so it won't obscure the parent's background. Position it carefully as shown below.

Create HTML

Create two <div> elements.

How to Limit Border Length with CSS

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

Add CSS

Style the <div> with an id "box" by using the height, width, and background properties. Set the position to “relative” and specify the border-bottom property. This will be the parent div. We want the bottom border of this div to be shown completely, but the left border we just want the bottom-half of it to be shown.
Style the <div> with an id "borderLeft" by specifying its border-left property. Set the position to “absolute” and add the top and bottom properties. This is the child div. By showing the border of this div, we make the limited-length border of the parent div.

How to Limit Border Length with CSS

#box {
  height: 70px;
  width: 70px;
  position: relative;
  border-bottom: 2px solid #0004ff;
  background: #cccaca;
}

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

Let’s see the result of our code.

Example of limiting the left border:

How to Limit Border Length with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box {
        height: 70px;
        width: 70px;
        position: relative;
        border-bottom: 2px solid #0004ff;
        background: #cccaca;
      }
      #borderLeft {
        border-left: 2px solid #0004ff;
        position: absolute;
        top: 50%;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="borderLeft"></div>
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> XFI4 <div id="borderLeft"> </div> </div> </div> Next, we’re going to demonstrate another example, where we limit the border length of four different elements. For that, we use four <div> elements and the :before pseudo-element. To limit the length of the top, bottom, right, and left borders, we use the border-top, border-bottom, border-right, and border-left properties, respectively.

Example of limiting the borders using pseudo-elements:

How to Limit Border Length with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        margin: 50px;
        color: #000;
      }
      div {
        width: 150px;
        height: 60px;
        position: relative;
        z-index: 1;
        background-color: #ffff3b;
        margin: 20px auto;
        padding: 20px;
        color: #726E97;
      }
      div.top:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 5px;
        width: 50%;
        border-top: 3px solid #000;
      }
      div.bottom:before {
        content: "";
        position: absolute;
        left: 25px;
        bottom: 0;
        height: 15px;
        width: 70%;
        border-bottom: 3px solid #000;
      }
      div.left:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 50px;
        width: 50%;
        border-left: 3px solid #000;
      }
      div.right:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 50px;
        width: 50%;
        border-right: 3px solid #000;
      }
    </style>
  </head>
  <body>
    <h1>Example of limiting border length</h1>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>

Try it Yourself »