Calculate the Area of an Outside Rectangular Focus Outline
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.
1 · control | border-box width CSS px | border-box height CSS px
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.
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.
Perspective: 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.
2 · Read the focus-outline geometry docket
Idealized rectangular geometry only. It neither evaluates WCAG criteria nor certifies an accessible focus indicator; inspect the actual focused component and relevant standards.
Paid layer: focus-outline geometry docket print and history
one-time step · the free reading above stays complete
Free tier
- one complete focus-outline geometry docket run in the app
- three samples plus unlimited article-demo runs
- unwatermarked result text and an explicit, user-triggered state link
What $4 one-time adds
- print the focus-outline geometry docket with its row workings
- CSV of square CSS px outline area and row explanations
- last five reading summaries saved in this browser profile
$4 once for repeated filing of the focus-outline geometry docket, not for a better answer. Illustrative time basis: avoiding one five-minute manual reformat per saved reading; no market-price or guaranteed-savings claim.
Local history (this device)
- No saved runs yet — your first run files here.
Checkout is unavailable until a payment link is configured. The optional unlock is browser-local, profile-scoped and best-effort, not server-verified access. Clearing browser data can remove it; there is no account or cross-device recovery.
Boundary and sources
Idealized rectangular geometry only. It neither evaluates WCAG criteria nor certifies an accessible focus indicator; inspect the actual focused component and relevant standards.
- 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.
Mechanism: competence-autonomy-loop
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.