Calculate the Area of an Outside Rectangular Focus Outline — Free
A two-pixel outside outline contains more area around a large control than a small one. Calculate the rectangular ring explicitly before discussing focus-indicator design with a reviewer.
The proof surface
Color-contrast tools compare luminance. This isolates outline geometry and does not measure contrast, clipping, visibility or any conformance threshold.
Why the flat version breaks
Using physical screen pixels
Browser zoom and device pixel ratio can make screenshot dimensions differ from CSS dimensions.
Counting a gap as painted outline
An offset gap contains no visible indicator pixels.
Inferring conformance from area alone
A large outline can still be invisible, clipped or insufficiently contrasting.
How to work the focus-outline geometry docket
Use the rendered control width and height, not device pixels from a screenshot. This model assumes a plain rectangle with square corners.
The ring sits immediately outside the border box with zero offset. Rounded corners, gaps, inset borders and irregular shapes are outside this model.
Area = (width + 2t) × (height + 2t) − width × height. A 100 by 40 control with t = 2 has an outside ring of 576 square CSS pixels.
The sum is an area tally across controls, not a pass score. Check contrast, obstruction, clipping and keyboard visibility in the real interface; this calculator has no compliance flags.
What the focus-outline geometry docket replaces
| Question | Before | Visible working |
|---|---|---|
| Using physical screen pixels | Browser zoom and device pixel ratio can make screenshot dimensions differ from CSS dimensions. | Choose a uniform outside thickness |
| Counting a gap as painted outline | An offset gap contains no visible indicator pixels. | Subtract the inner rectangle from the outer |
| Inferring conformance from area alone | A large outline can still be invisible, clipped or insufficiently contrasting. | Review the actual focused state |
A local arithmetic aid replaces hand calculation, not expert review. No paid AI service is needed.
Run it on the samples, right here
FIRST-LOAD
Research prototype — checkout unavailable. Input is processed locally and a draft is saved automatically in this browser profile when storage is available. Reset to sample clears that draft; Pro history has its own clear button. A state link encodes your inputs in its URL: share only non-sensitive rows. Browser history, clipboard and anyone receiving the link may retain it. Optional AI use below leaves this device; it is not required.
Idealized rectangular geometry only. It neither evaluates WCAG criteria nor certifies an accessible focus indicator; inspect the actual focused component and relevant standards.
Data note: Everything runs in this browser tab on the focus-outline geometry docket: your control | border-box width CSS px | border-box height CSS px stays on this device, nothing is uploaded, and the reading is rebuilt only when you press run.
Go deeper: the companion app files the same reading as a clerk's docket sheet
The article demo above runs without limits. The companion app keeps a local history, exports the rows as CSV, prints the focus-outline geometry docket reading, and holds your drafts on this device — one complete free run; the proposed $4 one-time filing layer is not currently for sale.
The focus-outline geometry docket reading is complete for free. The optional $4 layer adds print, row CSV and the last five local reading summaries; it does not add hidden answers. Checkout is not configured yet; the article demo remains unlimited.
Open the calculate the area of an outside rectangular focus outline companionBoundary
Idealized rectangular geometry only. It neither evaluates WCAG criteria nor certifies an accessible focus indicator; inspect the actual focused component and relevant standards.
What this is built on
- Method: Area = (width + 2t) × (height + 2t) − width × height. A 100 by 40 control with t = 2 has an outside ring of 576 square CSS pixels.
- All sample records are invented examples. The app does not fetch measurements, policies, files or personal records.
- Google’s official pricing page, fetched 2026-09-29, lists free-tier access including AI Studio. Optional formatting only; limits and availability can change. Free-tier content may be used to improve products. Never paste private records there.
Before: Browser zoom and device pixel ratio can make screenshot dimensions differ from CSS dimensions. After: the focus-outline geometry docket shows the working beside each named row so the reader can change the assumption and inspect the consequence.
Optional AI formatting, not calculation
For this focus-outline geometry docket, use the free AI Studio interface only if available to you, with no paid API key. Manual entry completes the same workflow for free. Supply only fictional or non-sensitive notes. Review its output against the source; never paste unresolved questions into the numeric rows.
Format my non-sensitive notes for a focus-outline geometry docket. Return plain rows only: control | border-box width CSS px | border-box height CSS px. Preserve supplied quantities exactly. Do not guess missing values; list questions separately. Do not calculate or add advice. I will check every row before pasting into the local tool.
Accepted schema: control | border-box width CSS px | border-box height CSS px. No AI response is executed as code.