How to Place Border Inside Div and Not on its Edge in CSS ?

Last Updated : 26 Apr, 2023

CSS(Cascading Style Sheet) is a language that provides a style and describes the presentation of a website written in HTML. It provides different layouts, and the appearance of a page, including text, images, and other animation controls. It separates the content and structure of a web page from its presentation, allowing designers to change the appearance of a website without affecting the underlying HTML code. CSS also includes advanced features like media queries, which allow designers to apply styles based on the device or screen size, and animations and transitions, which add visual effects to web pages. By default, a div element does not have any visible borders or outlines. However, you can add a border to a div element using the border property in CSS. By setting the border property, you can create a border around the div element that separates it from other content on the page.

In this article, we will see the approaches to placing the border inside of the div and not on its edge.

Approach 1: Using box-size property: We can place a border inside a div element using the box-sizing property of CSS by setting its value to “border-box”. Using this will create a border to be included in the div elements’ width and height instead of adding it to the edge.

Example: This example is implemented using the using box-size property.

HTML

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <style> 
        .name { 
            margin-top: 2rem; 
            color: green; 
            text-align: center; 
        } 
  
        .box { 
            margin-left: 38rem; 
            margin-right: 38rem; 
            width: 300px; 
            height: 200px; 
            background-color: lightgray; 
            padding: 1rem; 
            box-sizing: border-box; 
            border: 2px solid gray; 
        } 
  
        .inner { 
            border: 2px solid red; 
            height: 100%; 
            box-sizing: border-box; 
            padding: 1rem; 
            text-align: center; 
            color: green; 
        } 
    </style> 
    <title>Document</title> 
</head> 
  
<body> 
    <h1 class="name">GeeksforGeeks</h1> 
    <div class="box"> 
        <div class="inner"> 
            <h2>inner border example</h2> 
        </div> 
    </div> 
</body> 
</html>

Output:

Approach 2: Using box-shadow property: Using this, we will set the property left, right, top, and bottom to 2px which creates a margin of 2px on the margin between the inner div and the edge of the outer div element. The box-shadow property creates the inner border, using the inset property, and specifies it as an inner shadow.

Example: This code below is implemented using the box-shadow property.

HTML

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <style> 
        .name { 
            text-align: center; 
            color: green; 
            margin-top: 1rem; 
        } 
  
        .box { 
            margin: 0 33rem 0 33rem; 
            width: 400px; 
            height: 200px; 
            background-color: aquamarine; 
            padding: 1rem; 
            position: relative; 
        } 
  
        .inner { 
            position: relative; 
            top: 2px; 
            left: 2px; 
            right: 2px; 
            bottom: 2px; 
            padding: 1rem; 
            box-shadow: inset 0 0 0 2px red; 
        } 
    </style> 
    <title>Document</title> 
</head> 
  
<body> 
    <h1 class="name">GeeksforGeeks</h1> 
    <div class="box"> 
        <div class="inner"> 
            <p> 
                This is an example of border  
                  inside a div elemenet. 
            </p> 
        </div> 
    </div> 
</body> 
</html>