Season 2 of the Overtime podcast is here! Listen to the first episode with Meg Robichaud now.
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?
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2017 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.