Description
Compact resolved four-corner numeric horizontal and vertical radius lists to their shortest 1–4 value shorthands; no units or slash parsing.
CSS combines token syntax, property-specific value rules and layout/cascade processing. These are separate layers: splitting a declaration does not establish that its value is valid, and arithmetic on resolved lengths does not perform browser layout. Each tool here handles an explicit numeric representation or a stated lexical subset.
Compact resolved four-corner numeric horizontal and vertical radius lists to their shortest 1–4 value shorthands; no units or slash parsing.
When to use this tool
Use this tool to compact resolved four-corner numeric horizontal and vertical radius lists to their shortest 1–4 value shorthands; no units or slash parsing.
How to use the tool and how it works
- Enter horizontal, vertical using the input definitions below.
- Run the operation. Resolve malformed-input errors before interpreting the result.
- Read result.horizontal, result.vertical. Interpret signs, units, ordering and null values using the rules below.
Require four nonnegative values per axis. Choose one value if all equal, two if opposite corners agree, three if top-right equals bottom-left, otherwise four. Compact horizontal and vertical lists independently.1, 2
| Input field | Meaning and units | Accepted input |
|---|---|---|
| horizontal | Horizontal corner radii in TL,TR,BR,BL order; expansion accepts 1–4 values, compaction requires four. | Dense list of at most 128 finite numbers, subject to the stated integer/shape rules. |
| vertical | Vertical corner radii in the same corner order; all radii are nonnegative resolved numeric lengths. | Dense list of at most 128 finite numbers, subject to the stated integer/shape rules. |
| Output field | Interpretation |
|---|---|
| result | Object containing the fields below. |
| result.horizontal | Shortest equivalent 1–4 value radius shorthand for this axis. |
| result.vertical | Shortest equivalent 1–4 value radius shorthand for this axis. |
{
"input": {
"horizontal": [
2,
4,
2,
4
],
"vertical": [
1,
1,
1,
1
]
},
"output": {
"result": {
"horizontal": [
2,
4
],
"vertical": [
1
]
}
}
}Limitations and assumptions
- Comparisons are exact numeric equality. The operation does not parse CSS units or join the two lists with slash syntax.
- Lengths and times must already be resolved to consistent numeric units. Lexical helpers intentionally support smaller grammars than a full browser CSS parser; malformed supported-subset input causes an error.
- Every declared top-level input is required and unknown fields are rejected. Ordinary strings are limited to 8,192 UTF-16 code units and lists to 128 entries, with tighter operation-specific bounds where stated. JSON text has bounded nesting and node counts.
- Numeric outputs must be finite and within the absolute safe-integer magnitude; exact larger integers use decimal text. Source positions are zero-based UTF-16 offsets and span ends are exclusive unless a different convention is explicitly stated.
Alternative or Complementary methods
Use a full CSS parser or browser style/layout APIs when escape handling, error recovery, computed styles or the full cascade matter. These tools expose focused transformations and audits of supplied data.
References
Similar or alternative tools
- CSS Border Radius Pair Expander
Expand explicit nonnegative numeric horizontal/vertical border-radius shorthand lists independently in TL,TR,BR,BL order; no unit resolution.
- CSS Border Radius Overlap Scale
Apply the CSS uniform corner-radius overlap reduction to explicit resolved numeric dimensions; zero-radius sums impose no constraint.