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

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>

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


Do you find this helpful?

Related articles