Placing border inside of div and not on its edge

html

css

box-shadow

responsive-design

byNikita Barsukov·Mar 2, 2025

Insert your border right inside the <div> using box-sizing: border-box;. This CSS property includes padding and border within the width and height, instead of adding to it.

.div-border-inside {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid red; /* Enjoy the color red, free of charge */
  padding: 10px;
}

Apply this style to your <div>, to get the internal border style:

<div class="div-border-inside"></div>

The 100px block takes the border also into account, maintaining the specified dimensions.

Browser back-compatibility

To take care of those who are still clinging onto their old browsers:

.div-border-inside {
  -webkit-box-sizing: border-box; /* Hi, Safari users! */
  -moz-box-sizing: border-box; /* Firefox folks, this is for you */
  box-sizing: border-box;
  /* Remaining styles */
}

These browser-specific properties ensure compatibility with older browser versions including IE8+.

Inner-glow borders with box-shadow

Sure, you can use the force, but here's how you use box-shadow for inner borders and that soft glowy effect:

.div-shadow-border-inside {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  box-shadow: inset 0px 0px 0px 10px red; /* My red obsession continues */
  padding: 10px;
}

Just a heads up, while box-shadow has a wide scoreboard, make sure to check for specific properties on resources like Can I use.

Crafty outlines for non-disruptive borders

Use outline to sneak in borders without affecting the box size or layout:

.div-outline-border-inside {
  outline: 2px solid red; /* Seeing red, yet? */
  outline-offset: -2px; /* Move inward, but don't push the element */
}

Use negative values for outline-offset to relocate your outline inside the <div>.

Case-by-case scenarios

Case: Multiple inner borders

Watch the magic happen. Create multiple borders by comma-separating shadow values:

.div-multiple-borders {
  box-shadow: inset 0 0 0 5px red, inset 0 0 0 10px blue; /* Red or Blue? Why not both? */
}

Case: Hover effects

A little interaction never hurts. Hover around:

.div-hover-effect:hover {
  box-shadow: inset 0 0 0 5px green; /* Now it's green on hover! */
}

Case: Color & spread manipulation

You can adjust the spread and add that nuance with RGBA colors:

.div-colored-border {
  box-shadow: inset 0 0 0px 10px rgba(255, 0, 0, 0.5); /* Red again, but softer */
}

Advanced cases

3D effect

With inset box-shadows, simulate a 3D effect. Try this:

.div-depth-effect {
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.4); /* BAM! It's 3D. */
}

Decorative double borders

Elegance is key. Use box-shadow for double borders:

.div-decorative-borders {
  box-shadow: inset 0px 0px 0px 3px #EFEFEF, inset 0px 0px 0px 6px #BDBDBD; /* Now we're talking */
}

Animated border transitions

Bored of static borders? Let's animate:

.div-animated-border {
  transition: box-shadow 0.3s ease;
}
.div-animated-border:hover {
  box-shadow: inset 0 0 0 3px orange; /* Boooom! An orange explosion on hover. */
}