CSS Inner Corner Radius Generator

How the Inner Corner Radius Generator Works?

This tool calculates the radius for the inner element based on two values you enter: the outer border-radius and the padding applied to the outer element. The logic is simple - if you want the inner corner to look smooth and follow the shape of the outer box, you must subtract the padding value from the outer radius.

Formula and Key Rules

The formula used by the tool is:

inner-radius = max(0, outer-radius − padding)

Important notes:

The result can never be negative - if padding is greater than the outer radius, the inner radius becomes 0.
Units: keep the same units for both values (e.g., both in px or both in rem). If you mix units, results will not be valid.
The generator outputs CSS with calc() (as a semantic formula) and a numeric fallback value for browser reliability.

Example of Generated HTML/CSS

Here’s an example generated by the tool. The outer radius is 30px, padding is 20px, which makes the inner radius 10px.

<!-- HTML -->
<div class="outer">
  <div class="inner"></div>
</div>

<!-- CSS -->
:root {
  --outer-radius: 30px;   /* outer border-radius */
  --outer-padding: 20px;  /* outer padding */
  --outer-bg: #e6e6e6;
  --inner-bg: #ffffff;
}

/* outer element */
.outer {
  width: 380px;
  height: 220px;
  padding: var(--outer-padding);
  border-radius: var(--outer-radius);
  background: var(--outer-bg);
  box-sizing: border-box;
  overflow: hidden; /* optional: clips content for smooth corners */
}

/* inner element — formula: outer - padding */
.inner {
  width: 100%;
  height: 100%;
  background: var(--inner-bg);
  /* semantic calc example */
  border-radius: calc(var(--outer-radius) - var(--outer-padding));
  /* fallback for full browser support */
  border-radius: 10px;
}

Notes and Practical Tips

overflow: hidden on .outer is very useful: if you don't want to calculate the inner radius at all, you can simply set radius on the outer element and let overflow: hidden clip the content — same visual effect with zero math.
If you use percentage units or rem, ensure padding and radius scale logically — the tool lets you pick units but does not convert mixed units.
If padding becomes larger than radius, inner radius becomes 0 for a clean sharp corner.
For complex layouts (multiple nested levels), use a single outer radius + overflow technique, or calculate one level at a time — cascading formulas can get messy.
Always test in your target browsers — the generator includes explicit fallback values to avoid issues.

Conclusion

The Inner Corner Radius Generator helps you create smooth, perfectly aligned inner corner radii by applying the formula inner = outer - padding and outputs safe, production-ready CSS. If you'd like, I can also create a short intro version, SEO meta description, and CTA text for your tool page.

Last update: 31. 10. 2025.