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.

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

Create HTML

Use two <div> elements.

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

Add CSS

Set the box-sizing property to “border-box”. Also, use the -moz- and -webkit- prefixes.
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;
  -moz-box-sizing: border-box;
  -webkit-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;
        -moz-box-sizing: border-box;
        -webkit-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

Some text

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>