Nested Corners CSS

Shot 1281592457

@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?

keyboard shortcuts: L or F like post comment