Placing border inside of div and not on its edge

Question

I have a  lt div gt  element and I want to put a border on it   I know I can write style  border  1px solid black   but this adds 2px to either side of the div  which is not what I want     I would rather have this border be -1px from the edge of the div  The div itself is 100px x 100px  and if I add a border  then I have to do some mathematics to make the border appear   Is there any way that I can make the border appear  and ensure the box will still be 100px  including the border

User · Answer

A more modern solution might be to use css variables and calc. calc is widely supported but variables is not yet in IE11 (polyfills available).

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

Although this does use some calculations, which the original questions was looking to avoid. I think this is an ok time to use calculations as they are controlled by the css itself. It also has no need for additional markup or misappropriating other css properties that may be needed later on.

This solution is only really useful if a fixed height isn't needed.

User · Answer

Best cross browser solution  mostly for IE support  like  Steve said is to make a div 98px in width and height than add a border 1px around it  or you could make a background image for div 100x100 px and draw a border on it

User · Answer

I know this is somewhat older  but since the keywords  border inside  landed me directly here  I would like to share some findings that may be worth mentioning here  When I was adding a border on the hover state  i got the effects that OP is talking about  The border ads pixels to the dimension of the box which made it jumpy   There is two more ways one can deal with this that also work for IE7   1  Have a border already attached to the element and simply change the color  This way the mathematics are already included   div      width 100px     height 100px     background-color   aaa     border  2px solid  aaa     notice the solid       div hover      border  2px dashed  666      2   Compensate your border with a negative margin  This will still add the extra pixels  but the positioning of the element will not be jumpy on   div      width 100px     height 100px     background-color   aaa     div hover     margin  -2px    border  2px dashed  333

User · Answer

If you use box-sizing  border-box means not only border    padding margin  etc  All element will come inside of the parent   element     x000D   x000D  div p   x000D      box-sizing  border-box  x000D      -moz-box-sizing  border-box  x000D      -webkit-box-sizing  border-box  x000D      width  150px  x000D      height 100   x000D      border  20px solid  f00  x000D      background-color   00f  x000D      color  fff  x000D      padding  10px  x000D     x000D    x000D   lt div gt  x000D     lt p gt It was popularised in the 1960s with the release of Letraset sheets lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Yahoo  This is really possible  I found it   For Bottom Border   div  box-shadow  0px -3px 0px red inset      For Top Border   div  box-shadow  0px 3px 0px red inset

User · Answer

Use pseudo element    x000D   x000D   button   x000D      background   333  x000D      color   fff  x000D      float  left  x000D      padding  20px  x000D      margin  20px  x000D      position  relative  x000D    x000D   x000D   button  after   x000D      content      x000D      position  absolute  x000D      top  0  x000D      right  0  x000D      bottom  0  x000D      left  0  x000D      border  5px solid  f00  x000D    x000D   lt div class  button  gt Hello lt  div gt  x000D   x000D   x000D    Using   after you are styling the virtual last child of the selected element  content property creates an anonymous replaced element   We are containing the pseudo element using absolute position relative to the parent  Then you have freedom to have whatever custom background and or border in the background of your main element   This approach does not affect placement of the contents of the main element  which is different from using box-sizing  border-box    Consider this example    x000D   x000D   parent   x000D      width  200px  x000D    x000D   x000D   button   x000D      background   333  x000D      color   fff  x000D      padding  20px  x000D      border  5px solid  f00  x000D      border-left-width  20px  x000D      box-sizing  border-box  x000D    x000D   lt div class  parent  gt  x000D       lt div class  button  gt Hello lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here  button width is constrained using the parent element  Setting the border-left-width adjusts the content-box size and thus the position of the text    x000D   x000D   parent   x000D      width  200px  x000D    x000D   x000D   button   x000D      background   333  x000D      color   fff  x000D      padding  20px  x000D      position  relative  x000D    x000D   x000D   button  after   x000D      content      x000D      position  absolute  x000D      top  0  x000D      right  0  x000D      bottom  0  x000D      left  0  x000D      border  5px solid  f00  x000D      border-left-width  20px  x000D    x000D   lt div class  parent  gt  x000D       lt div class  button  gt Hello lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Using the pseudo-element approach does not affect the content-box size    Depending on the application  approach using a pseudo-element might or might not be a desirable behaviour

User · Answer

One solution I didn t see mentioned above is the case where you have padding on your input  which I do 99  of the time  You can do something along the lines of     input     padding  8px     input invalid     border  2px solid red    padding  6px     8px - border or  calc 8px - 2px       What I like about this is that I have the full menu of border   padding   transition properties for each side

User · Answer

You can use the properties outline and outline-offset with a negative value instead of using a regular border  works for me     x000D   x000D  div  x000D      height  100px  x000D      width  100px  x000D      background-color  grey  x000D      margin-bottom  10px   x000D    x000D   x000D  div border  x000D      border  2px solid red  x000D    x000D   x000D  div outline  x000D      outline  2px solid red  x000D      outline-offset  -2px  x000D    x000D  Using a regular border  x000D   lt div id  border  gt  lt  div gt  x000D   x000D  Using outline and outline-offset  x000D   lt div id  outline  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can look at outline with offset but this needs some padding to exists on your div  Or you can absolutely position a border div inside  something like    lt div id  parentDiv  style  position relative  gt     lt div id  parentDivsContent  gt  lt  div gt     lt div id  fakeBordersDiv          style  position  absolute width  100                 height  100                 z-index  2                border  2px solid                border-radius  2px    gt   lt  div gt    You might need to fiddle with margins on the fake borders div to fit it as you like

User · Answer

You can also use box-shadow like this   div      -webkit-box-shadow inset 0px 0px 0px 10px  f00      -moz-box-shadow inset 0px 0px 0px 10px  f00      box-shadow inset 0px 0px 0px 10px  f00      Example here  http   jsfiddle net nVyXS   hover to view border   This works in modern browsers only  For example  No IE 8 support  See caniuse com  box-shadow feature  for more info

User · Answer

for consistent rendering between new and older browsers  add a double container  the outer with the width  the inner with the border    lt div style  width 100px   gt   lt div style  border 2px solid  000   gt  contents here  lt  div gt   lt  div gt    this is obviously only if your precise width is more important than having extra markup

User · Answer

Set box-sizing property to border-box    x000D   x000D  div   x000D      box-sizing  border-box  x000D      -moz-box-sizing  border-box  x000D      -webkit-box-sizing  border-box  x000D      width  100px  x000D      height  100px  x000D      border  20px solid  f00  x000D      background   00f  x000D      margin  10px  x000D    x000D   x000D  div   div   x000D      border  10px solid red  x000D    x000D   lt div gt Hello  lt  div gt  x000D   lt div gt Hello  lt  div gt  x000D   x000D   x000D    It works on IE8  amp  above

User · Answer

Probably it is belated answer  but I want to share with my findings  I found 2 new approaches to this problem that I have not found here in the answers   Inner border through box-shadow css property  Yes  box-shadow is used to add box-shadows to the elements  But you can specify inset shadow  that would look like a inner border rather like a shadow  You just need to set horizontal and vertical shadows to 0px  and the  spread  property of the box-shadow to the width of the border you want to have  So for the  inner  border of 10px you would write the following   div      width 100px      height 100px      background-color yellow      box-shadow 0px 0px 0px 10px black inset      margin-bottom 20px      Here is jsFiddle example that illustrates the difference between box-shadow border and  normal  border  This way your border and the box width are of total 100px including the border   More about box-shadow here  Border through outline css property  Here is another approach  but this way the border would be outside of the box  Here is an example  As follows from the example  you can use css outline property  to set the border that does not affect the width and height of the element  This way  the border width is not added to the width of an element    div     width 100px     height 100px     background-color yellow     outline 10px solid black      More about outline  here

User · Answer

Although this question has already been adequately answered with solutions using the box-shadow and outline properties  I would like to slightly expand on this  for all those who have landed here  like myself  searching for a solution for an inner border with an offset  So let s say you have a black 100px x 100px div and you need to inset it with a white border - which has an inner offset of 5px  say  - this can still be done with the above properties   box-shadow  The trick here is to know that multiple box-shadows are allowed  where the first shadow is on top and subsequent shadows have lower z-ordering   With that knowledge  the box-shadow declaration will be   box-shadow  inset 0 0 0 5px black  inset 0 0 0 10px white     x000D   x000D  div   x000D    width  100px  x000D    height  100px  x000D    background  black  x000D    box-shadow  inset 0 0 0 5px black  inset 0 0 0 10px white   x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    Basically  what that declaration is saying is  render the last  10px white  shadow first  then render the previous 5px black shadow above it   outline with outline-offset  For the same effect as above the outline declarations would be   outline  5px solid white  outline-offset  -10px     x000D   x000D  div   x000D    width  100px  x000D    height  100px  x000D    background  black  x000D    outline  5px solid white  x000D    outline-offset  -10px  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    NB   outline-offset isn t supported by IE if that s important to you    Codepen demo

[html] Placing border inside of div and not on its edge

Examples related to html

Examples related to css

Examples related to border