Calculating Stacked Border Radius

You’ve likely encountered the common issue of calculating a border radius value when you have an element with a border radius within a parent element which also has a border radius. If you use the same value for both, the inner radius will look wrong.

Instead of using the same value for both the inner and outer radius, you want to add the inner radius and the padding to get the value for the outer radius. For example, if the inner radius is 8px and the padding is 8px, then the outer radius should be 16px.