1

Is it possible to set the size of a child element such that it fills its parent and its parent's (rounded) border? Assuming I cannot simply hardcode everything.

This was my initial code: JSFiddle. The size of the <a> is 80 x 80 pixels vs. 82 x 82 pixels for <li>, because of its border. The difference is noticeable when activating the :hover.

It seems that using outline in place of border would do what I want, but there is no cross-browser outline-radius. That led me to this answer using box-shadow; this works (JSFiddle), but is there a less 'hacky' approach? Semantically, I want a border, not a shadow.

Community
  • 1
  • 1
Sam
  • 557
  • 6
  • 20

2 Answers2

2

Easiest approach... box-sizing.

* {
    box-sizing: border-box;
}

If you don't want to use that, then the only other logical solution is using box-shadow.

Sean Stopnik
  • 1,868
  • 11
  • 9
  • Looks like this also works if I only add it to `.exp { ... }`. Does it need to be applied to all elements? – Sam Jun 09 '15 at 03:50
  • 1
    No... you can add it wherever needed or wanted. Though its a lot easier coding when applied to all elements. Keeps the code consistent in my opinion. – Sean Stopnik Jun 09 '15 at 03:52
1

box-shadow is probably the most reliable option for cross-browser support, though it's not supported in some older browsers. Setting the shadow to inset has it behave like a border that's inside the element rather than outside, which will should resolve the somewhat 'hacky' look and keep a consistent size.

The way browsers render borders is similar to margin or padding, which can affect the amount of space an element occupies. Using something that's inset (ie, rendered inside an element) avoids this problem.

This approach can be somewhat justified semantically by considering box-shadow shorthand for a border with built in gradient functionality and some new options (like 2D inset positioning).

Adam
  • 56
  • 3