Nested Corners CSS

3 Responses

1. Pro Philip Renich

   @Dan Rubin,
   If I understand you correctly (which I feel I am not) getting the nested corners to be correct isn't difficult. You basically just change the border-radius by the amount that it is padded from the inner box.

   So here we have first of all Trent's example with the code he pasted in his comment. My shot is in Safari so the corners aren't correct, but they are in FF.

   Below that are two boxes, one nested inside the other. They use the same border-radius (10px).

   The third box edits the outer border-radius to 15px since it also has a padding of 5px. That padding is what causes the second box to not look correct.

   All of this is up on a test page so you can look at the code.

   Be-all-end-all is that it's simple to do, just take your internal radius add your padding and your result is what the outer radius should be. Were you thinking of something more complex?

   almost 2 years ago

2. Pro Trent Walton

   Great legwork... I wonder if the correct example can be done with the inset shadow.

   almost 2 years ago

3. Pro Philip Renich

   Well, to be fair, yours is already the most correct! It only uses one div, not two, so there is less markup. But I think Dan Rubin may have other situations in mind. But I did forget to add the inset shadow in for looks, you're right.

   almost 2 years ago