How to Limit Border Length with CSS

Sometimes, you may have difficulty when you need to make the border shorter than its parent element. To overcome this, use CSS properties and HTML elements. We’ll need to use border properties and some elements such as <span>, <div>, etc., or pseudo-elements.

The solution is quite easy. The idea is to create another "invisible" div inside the desired div, and just make the border for the inside div. In order for this solution to work, you need to place the child div very carefully, as it will be shown below.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create two <div> elements.
<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.
#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:

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

Result

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:

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

How about moving the box itself?

If you want to move the box itself around on the page, you can use the position and left/top properties. Here's an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      border-radius: 7px / 7px;
      padding: 20px;
      text-align: center;
      position: absolute;
      left: 50px;
      top: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>Hello, world!</h1>
    <p>This is a box with rounded corners.</p>
  </div>
</body>
</html>

In this example, we have a div element with the class box. We've used CSS to set the width, height, border, padding, corner radius, and text alignment of the box, as well as to position it absolutely on the page using the position, left, and top properties. The left property specifies the horizontal position of the box (in this case, 50 pixels from the left edge of the screen), and the top property specifies the vertical position of the box (in this case, 50 pixels from the top edge of the screen).

You can adjust the left and top values to move the box to a different position on the page. For example, if you want the box to be positioned 100 pixels from the left edge of the screen and 200 pixels from the top edge of the screen, you can set the left and top values accordingly:

How about creating a box with rounded corners?

Here's a full example of how to create a box with rounded corners with a maximum radius of 7 pixels:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      border-radius: 7px / 7px;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>Hello, world!</h1>
    <p>This is a box with rounded corners.</p>
  </div>
</body>
</html>

In this example, we have a div element with the class box. We've used CSS to set the width, height, border, and padding of the box, as well as to set a corner radius of 7 pixels horizontally and vertically. We've also centered the text inside the box using the text-align property.