outline-offset Negative Inset Ring
Signed nominal outline edge locations from offset/width, negative offsets inset; browser outline shape/overlap and box geometry not inferred. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Outline offset locates a drawing relative to an element's border edge.
Outline offset locates a drawing relative to an element's border edge.1
Signed inset geometry does not create layout space or evaluate focus visibility. Use outline-offset Negative Inset Ring to evaluate the supplied inputs under the specific model below.
When to use outline-offset Negative Inset Ring
Use outline-offset Negative Inset Ring to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use outline-offset Negative Inset Ring and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Observed outline offset px, Observed outline width px using the field table and validation rules below, then run the tool.
- Read Outer outline edge relative border px, Inner outline edge relative border px and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| observedOutlineOffsetPx | Observed outline offset px | number | Required; constraints below |
| observedOutlineWidthPx | Observed outline width px | number | Required; constraints below |
Enter a nonnegative outline width and finite signed outline offset in px. The modeled inner edge equals the offset and outer edge equals offset+width. Negative values are preserved and can place part or all of the modeled outline inward. No rounded-outline geometry, clipping or focus visibility measurement is supplied.
innerEdgePx = offsetPx; outerEdgePx = offsetPx+outlineWidthPx Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| outerOutlineEdgeRelativeBorderPx | Outer outline edge relative border px | number |
| innerOutlineEdgeRelativeBorderPx | Inner outline edge relative border px | number |
{
"input": {
"observedOutlineOffsetPx": -2,
"observedOutlineWidthPx": 1
},
"output": {
"outerOutlineEdgeRelativeBorderPx": -1,
"innerOutlineEdgeRelativeBorderPx": -2
}
}Limitations and assumptions
Signed inset geometry does not create layout space or evaluate focus visibility. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use Rotate Origin Offset Effect Note for a related task: Rotation about an offset origin first expresses the point relative to that origin.
Use Transform Function Order Matters Note for a related task: Rotation and translation generally do not commute.
References
-
outline-offset Negative Inset Ring — tool.io
Similar or alternative tools
- Rotate Origin Offset Effect Note
Rotation about an offset origin first expresses the point relative to that origin.
- Transform Function Order Matters Note
Rotation and translation generally do not commute.