How to place border inside of a div element using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS box-shadow Property

If you want to place or draw borders inside of a rectangular box there is a very simple solution — just use the outline property instead of border and move it inside of the element's box using the CSS3 outline-offset property with a negative value.

However, this solution will not work for rounded corner elements. But, you can still draw border inside a circular box or element with rounded corner using the box-shadow property with a little trick. Check out the following example.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Setting Border inside DIV Element</title>
  • <style type="text/css">
  •     .box {
  •         width: 180px;
  •         height: 180px;
  •         background: black;
  •         margin: 20px 50px;
  •     }
  •     .circle {
  •         border-radius: 50%;
  •     }
  •     .inner-border {
  •         border: 20px solid black;
  •         box-shadow: inset 0px 0px 0px 10px red;
  •         box-sizing: border-box; /* Include padding and border in element's width and height */
  •     }
  •     /* CSS3 solution only for rectangular shape */
  •     .inner-outline {
  •         outline: 10px solid red;
  •         outline-offset: -30px;
  •     }
  • </style>
  • </head> 
  • <body>
  •     <h2>Border inside Rectangular and Circular Shape</h2>
  •     <div class="box circle inner-border"></div>
  •     <div class="box inner-border"></div>
  •     <hr>
  •     <h2>Outline Inside Rectangular Shape</h2>
  •     <div class="box inner-outline"></div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.