217

On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?

Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.

EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..

0

18 Answers 18

151

This is also helpful in this scenario. It allows you to set borders without changing div width

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Taken from http://css-tricks.com/box-sizing/

5
  • 7
    box-sizing: border-box should really be set on everything as a modern best practice. See paulirish.com/2012/box-sizing-border-box-ftw
    – jbyrd
    Apr 4, 2017 at 12:42
  • 20
    This doesn't seem to work in some cases; not exactly sure why. See: codepen.io/anon/pen/QZaBQG
    – W Biggs
    Oct 16, 2018 at 17:14
  • 1
    @WilsonBiggs Yes! It is not reliable at all!
    – 71GA
    Oct 12, 2020 at 16:28
  • yeah browser likes to make the elements bigger when adding border some times even with box sizing set....
    – ICW
    Nov 10, 2022 at 23:05
  • 5
    If a width isn't set on the element it ignores box-sizing: border-box.
    – SethWhite
    Dec 5, 2022 at 20:13
122

If you don't have a border-radius change border to outline:

outline: 1px solid black;
7
  • 29
    Works unless you have border-radius. Nov 7, 2019 at 18:34
  • 8
    outline-left, outline-right, outline-top, outline-bottom are really missing....
    – 71GA
    Oct 12, 2020 at 16:27
  • if you dont have border-radius then this is the perfect solution.
    – Hemant
    Apr 15, 2021 at 9:03
  • This answer just repeats the one given two years earlier by @chowey.
    – Kal
    Jul 6, 2021 at 1:56
  • 3
    Works for me even with a border-radius
    – Shyne
    Dec 20, 2022 at 15:39
98

Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

Why it's better:

  • No need to to hard-code the element's width
  • Great cross-browser support (only IE6 missed)
  • Unlike with outline, you can still specify, e.g., top and bottom borders separately
  • Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.
7
  • 3
    I found this to work best with dynamically sized items in my UX. Stopped the size-shifting happening onMouseOver completely! Thanks Mr. Newell!
    – d3r3kk
    Apr 27, 2017 at 7:10
  • 3
    much better than hardcoding a decrease of the width and height for the increase given by a border Apr 22, 2021 at 11:48
  • 1
    Why isn't this the accepted answer? Simple, effective as well as logical.
    – Gogol
    Nov 29, 2022 at 19:33
  • 1
    this is a simple yet effective solution. Dec 6, 2022 at 6:09
  • 1
    Easily the best solution Jan 18, 2023 at 17:52
71

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}
5
  • thnx, i had .dragdrop-selected class but it was used by all dragable objects and I had like 3 different size (3 different type) of Dragable object, so I kept padding same in all 3 AND set padding in .dragdrop-selected.. & it worked. :)
    – Nachiket
    Jul 15, 2010 at 16:40
  • 3
    This is not a good solution for responsive designs. Using outline or a border with same color as background (and changing its color to something else when is selected) is more flexible.
    – AliBZ
    Oct 1, 2015 at 22:23
  • 2
    But suppose you need to avoid hard-coding the width, to let the element flow or respond to the view-port width: see my answer using border-color: transparent Apr 30, 2016 at 4:11
  • 1
    No need for these calculations, just set box-sizing to border-box. See ejfrancis' answer below, and see this article.
    – jbyrd
    Apr 4, 2017 at 12:44
  • Are you sure about the td in tables? In Chrome it still seems to add to the size. Apr 24, 2019 at 11:26
71

set a border on it before you click to be the same color as the background.

Then when you click just change the background color and the width will not change.

5
  • 4
    Ingenious! wish I had thought of it myself. Aug 11, 2015 at 19:29
  • 19
    Yeah, but if you don't have a solid colored background? See my answer using border-color: transparent Apr 30, 2016 at 4:12
  • this not gonna work well if you have a shadow box.
    – Rong Zhao
    Jul 27, 2021 at 13:24
  • I didn't have the exact same issue, but your answer was helpful for my use case. Thanks Aug 24, 2021 at 14:46
  • The best, it works very well, Great solution!Thanks
    – Irfan
    Mar 3, 2022 at 7:55
55

Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.

(https://stackoverflow.com/a/8319190/2105930)

5
  • 1
    It's great, but comparing with border, there is no "outline-left,...", not for my case.
    – Imskull
    Apr 6, 2015 at 3:53
  • 2
    Then I recommend using box-shadow per my other answer on a similar question. It doesn't have the same browser support, but that is less of an issue these days.
    – chowey
    Apr 6, 2015 at 6:12
  • Thank you #chowey , just realized box-shadow can support one-side border as well, prefect solution.
    – Imskull
    Apr 6, 2015 at 6:38
  • 1
    border-color: transparent has better cross-browser support --- see my answer... Apr 30, 2016 at 4:14
  • 2
    This comment's under-rated. It's a great way to get a border around an element without resizing it! Jul 31, 2016 at 14:33
40

I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

enter image description here

See my code here: https://jsfiddle.net/3t7vyebt/4/

3
  • 1
    Can you tell me what is actually happening , i am confused , why does in bad border hover here shift downwards when you hover over it?
    – Suraj Jain
    Jan 23, 2017 at 3:19
  • @SurajJain Because the size of "bad border" div will be changed (add 1px of border) when you hover over it.
    – Tho
    Jan 23, 2017 at 6:23
  • 1
    This is a nice trick, thanks!
    – Shawn
    Mar 19, 2022 at 17:54
25

Try this

box-sizing: border-box;
4
  • 6
    This should be the answer, dirt simple.
    – Spets
    Sep 27, 2017 at 16:24
  • Why does this not work everywhere? E.g. codepen.io/anon/pen/QZaBQG
    – Tom
    Apr 30, 2020 at 18:11
  • hi @Tom, I'm not sure why it doesn't work yet. But in your case please consider to remove height in container and use padding instead. Can solve your problem. May 1, 2020 at 7:47
  • This is the best answer.
    – Andrej
    Dec 4, 2021 at 12:32
7

Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

You can also do a lot more with the pseudo element so this is a pretty powerful pattern.

2
  • 1
    I had a 1px border that I wanted to change to 2px, and the only way I could find to do that was by removing the width and height and adding a bottom and left property in addition to the top and left, all of which should be set to the opposite width of the original border (in my case -1px). Great hack though Mar 26, 2020 at 23:52
  • This was quite useful for me actually, and simpler than implementing inner div borders or other hacks. Sep 15, 2021 at 11:00
6

Just decrease the width and height by double of border-width

6

You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}
2

Try decreasing the margin size when you increase the border

0
2
.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
1
  • 1
    I think it would be more helpful for the OP and further visitors,whenn you add some explaination for your intension.
    – Reporter
    Aug 11, 2014 at 12:25
2

I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.

Values separated by comma. Here's a simple example:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

Adjust for your preferred look and you're good to go!

2

We can also use css calc() function

width: calc(100% - 2px);

subtracting 2px for borders

2

You can try a box-shadow inset

something like this: box-shadow:inset 0px -5px 0px 0px #fff

adds a white 5px border to the bottom of the element without increasing the size

1

You can create the element with border with the same color of your background, then when you want the border to show, just change its color.

2
  • 1
    Yeah, but suppose your background isn't a solid color... see my response based on using border-color: transparent Apr 30, 2016 at 4:10
  • Or all together like ul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;} Feb 7, 2017 at 17:29
0

In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

Example here: https://codepen.io/Happysk/pen/zeQzaZ

1
  • The outline doesn't have rounded corners unfortunately :(
    – M3RS
    Jul 5, 2019 at 8:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.