Hey everyone! I’m working on a navigation menu and running into a CSS border issue that’s driving me crazy.
I have menu items that need to be exactly 40px tall. I’m using padding to control the size instead of setting a fixed height. The problem is when I add a 1px border, my menu items become 42px tall because the border adds extra space above and below.
Is there a CSS property or technique to make borders render inside the element instead of outside? I need the border to be part of the total dimensions, not additional to them. I can’t just reduce the padding because it would mess up the text spacing.
I remember seeing something similar in design tools where borders can be set to “inside” mode. Does CSS have anything like this? Any workarounds or solutions would be super helpful!
Another trick: use inset box-shadow instead of borders. box-shadow: inset 0 1px 0 #color creates an inside border without changing dimensions. Perfect for menu items when you don’t want to mess with box-sizing globally.
You can also use outline instead of border. Outline doesn’t mess with the box model since it draws outside the element without taking up space. Perfect for focus states or hover effects on menu items. Downside? You can’t pick which sides get the outline like with borders - it’s all four sides or nothing. I’ve used this on projects where I needed exact dimensions and it saved me from recalculating padding. Just heads up - older browsers don’t support outline on individual sides.
Try using pseudo-elements instead of actual borders. Create an ::after or ::before element with absolute positioning inside your menu item - it acts like a border but doesn’t mess with the box model at all. I did this on a recent project for complex border animations. The pseudo-element sits inside the container and you can style it however you want - solid lines, gradients, animations, whatever. Takes more CSS but way more flexible than regular borders, especially when you need exact spacing control.
yeah, box-sizing totally helps, but keep an eye on padding! it can mess with your text spacing when the border takes up some of that space. might have to tweak your padding a bit after adding box-sizing to get everything looking nice again.
You need box-sizing: border-box. This makes CSS include padding and borders inside your specified width/height instead of adding them on top. So your 40px height will actually stay 40px even with borders.
I hit this exact problem building a responsive grid last year - box-sizing fixed it instantly. Most devs now set * { box-sizing: border-box; } globally in their CSS reset since it makes layouts way more predictable.
Just add it to your menu selectors and the border gets counted inside the dimensions instead of expanding them.