How to Set Inner Border in CSS

An inner border can mean either keeping an element’s declared dimensions fixed when it has a border, or drawing a visible stroke inside its edge. Use box-sizing: border-box for the first goal, box-shadow: inset for a crisp inner stroke, or a negative outline-offset to move an outline inward.

Use the box-sizing Property to Set the Inner Border in CSS

box-sizing: border-box includes an element’s padding and border in its declared width and height. It controls the size calculation; it does not draw a separate stroke inside the element. For a 200px square with a 10px red border, use box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;. The outer box remains 200 by 200 pixels, and the red border occupies part of that area. Add padding if the content needs space from the border. With the default content-box, width and height measure the content area, so padding and borders add to the outside dimensions. border-box is useful when a component must fit a known layout size; it does not replace choosing an appropriate border width.

This self-contained JavaScript example prints HTML containing the same sizing and border:

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

Paste the printed markup into an HTML document to see the fixed-size square.

Use the box-shadow Property to Set the Inner Border in CSS

Use an inset box-shadow when you want a visible stroke without changing the element’s layout size. For a 200px green square with a 10px red stroke, put this CSS on a <div>Content</div>: <div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>. The first two shadow values are horizontal and vertical offsets; both are zero here, so the stroke is even on each side. The third value is blur, set to zero for a sharp edge. The fourth is spread, which sets the stroke’s thickness in this example. inset draws the shadow inside the box. Change the color or spread to adjust its appearance; the blur and spread values may be omitted when appropriate, since both default to zero. Since the shadow does not reserve layout space, nearby elements keep their positions. If you also set a border, that border remains and can cover part of the inset shadow.

Use the outline and outline-offset Properties to Set the Inner Border in CSS

An outline is painted around an element and does not take up layout space. Set outline: 5px solid red; outline-offset: -5px; on a 200px square <div>Content</div> with a green background to move the red outline inward. The negative offset pulls the outline from the outside edge toward the content; it does not turn an outline into a border. Because the outline is drawn over the element, it can overlap text or other content near the edge. Use this method when that overlay is acceptable, and choose box-shadow when you want an inset stroke that stays within the element’s painted area.