How to Add Border Inside a Div

If you need to place a border inside a <div> element, you are in the right place. In this snippet, we’ll demonstrate how this can be done using some CSS properties.

Start with creating HTML.

Create HTML

Use two <div> elements.

<div>Some text</div>
<div>Some text</div>

Add CSS

Set the box-sizing property to border-box. This ensures the border is included within the specified width and height, effectively placing it inside the content area.
Set the width and height of the <div> to 120px.
Specify the border and margin properties and add a background.
Set the border of the second <div>.

div {
  box-sizing: border-box;
  width: 120px;
  height: 120px;
  border: 20px solid #969696;
  background: #d9dbda;
  margin: 10px;
}

div + div {
  border: 10px solid #969696;
}

Now, let’s see the full code.

Example of placing a border inside a `<div>` element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        border: 20px solid #969696;
        background: #d9dbda;
        margin: 10px;
      }
      div + div {
        border: 10px solid #969696;
      }
    </style>
  </head>
  <body>
    <div>Some text</div>
    <div>Some text</div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <div>Some text</div> <div>Some text</div> </div>

Next, see an example, where we place a border and an outline inside a <div> element.

Example of placing a border and an outline inside a `<div>` element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 180px;
        height: 180px;
        background: #d9dbda;
        margin: 20px 50px;
      }
      .inner-border {
        border: 20px solid #d9dbda;
        box-shadow: inset 0px 0px 0px 10px #969696;
        box-sizing: border-box;
      }
      .inner-outline {
        outline: 10px solid lightblue;
        outline-offset: -30px;
      }
    </style>
  </head>
  <body>
    <h2>Border inside a Div</h2>
    <div class="box inner-border"></div>
    <h2>Outline Inside a Div</h2>
    <div class="box inner-outline"></div>
  </body>
</html>

Try it Yourself »

In the example above, we used the outline property instead of the border and then moved it inside the box using the outline-offset property with a negative value. A negative outline-offset shifts the outline inward from the element's border edge, effectively placing it inside the content area.