Description
Expand explicit nonnegative numeric horizontal/vertical border-radius shorthand lists independently in TL,TR,BR,BL order; no unit resolution.
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.
Expand explicit nonnegative numeric horizontal/vertical border-radius shorthand lists independently in TL,TR,BR,BL order; no unit resolution.
When to use this tool
Use this tool to expand explicit nonnegative numeric horizontal/vertical border-radius shorthand lists independently in TL,TR,BR,BL order; no unit resolution.
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.
Expand each 1–4 value nonnegative numeric radius list independently: [a]→[a,a,a,a], [a,b]→[a,b,a,b], [a,b,c]→[a,b,c,b], otherwise retain four corners. Order is top-left, top-right, bottom-right, bottom-left.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 | Four resolved corner radii in TL,TR,BR,BL order. |
| result.vertical | Four resolved corner radii in TL,TR,BR,BL order. |
{
"input": {
"horizontal": [
2,
4
],
"vertical": [
1
]
},
"output": {
"result": {
"horizontal": [
2,
4,
2,
4
],
"vertical": [
1,
1,
1,
1
]
}
}
}Limitations and assumptions
- Components are resolved numeric radii 0–1,000,000,000 in common units; slash syntax, percentages and overlap reduction need separate operations.
- 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 Compactor
Compact resolved four-corner numeric horizontal and vertical radius lists to their shortest 1–4 value shorthands; no units or slash parsing.
- CSS Border Radius Overlap Scale
Apply the CSS uniform corner-radius overlap reduction to explicit resolved numeric dimensions; zero-radius sums impose no constraint.