cornerfit

The biggest rectangle of content that fits inside a CSS border-radius without clipping into the corners — including irregular elliptical ones. Read the safe padding off, or grab the JS for your build.

width (px) height (px)

border-radius

corner reach t 45.0° 45° = the classic 1−1/√2 comfort point. Higher reaches deeper into each corner; lower stays safely shy.

overlays

safe frame

width–

height–

fits–

safe padding

top–

right–

bottom–

left–

per-side max length

top–

bottom–

left–

right–

parse / clamp

css scale–

max area–

vs frame–

Use it in code — this call matches the numbers above

Drop cornerfit.js next to your page and call cornerfit({width, height, borderRadius}). It returns frame (the safe rectangle), inset (use it as padding), sides (per-side lengths), and a contains(x,y) test. Works as a plain <script> (global cornerfit), via import from cornerfit.mjs, or through a bundler.

corner order TL · TR · BR · BL | horizontal % resolves to width, vertical % to height | oversized radii clamp exactly like the browser does | the safe frame is provably inside for any reach angle; "max area" is a numerical local maximum.