One thing that bothers me about this—and it's actually common to do this—is that the corner radius on the outside box (the inset) should be larger to wrap better with the inside box (the orange "button".
Normally, what works for me, is taking the inside box's radius and adding to it the distance of the gap between it and the outside box, then using that value as the corner radius for the outside box. That way, you get a consistant distance all the way around the edges and corner of two elements.
Also, I say "should be larger" because it just looks better that way and is probably closer to what you'd see if this was a real thing in the real world.
4 Responses
Pro
Jesse Guerrero
:)
5 months ago
Pro
Matt McDaniel
One thing that bothers me about this—and it's actually common to do this—is that the corner radius on the outside box (the inset) should be larger to wrap better with the inside box (the orange "button".
Normally, what works for me, is taking the inside box's radius and adding to it the distance of the gap between it and the outside box, then using that value as the corner radius for the outside box. That way, you get a consistant distance all the way around the edges and corner of two elements.
Also, I say "should be larger" because it just looks better that way and is probably closer to what you'd see if this was a real thing in the real world.
4 months ago
Pro
Andre Ortiz
Great feedback, Matt. So I understand, the inset box needs a higher border radius? I can see that. Thanks.
4 months ago
Pro
Matt McDaniel
Basically, yeah. I've found that following that formula and treating those relationships as simple numbers gets rid of a lot of room for error.
4 months ago