Border-Width 2-Value Expansion
Expand two nonnegative pixel border widths into vertical and horizontal sides.
Description
A two-value border-width shorthand assigns one width to top/bottom and another to right/left.
A two-value border-width shorthand assigns one width to top/bottom and another to right/left. Numeric widths are nonnegative, unlike margin and inset values which may be negative.1
Expand two nonnegative pixel border widths into vertical and horizontal sides.
When to use Border-Width 2-Value Expansion
Use this tool to expand two nonnegative pixel border widths into vertical and horizontal sides.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use Border-Width 2-Value Expansion and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter vertical, horizontal using the field table and calculation rules, then run the tool.
- Read top, right, bottom, left. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| vertical | Vertical border width | number; minimum: 0 | Required |
| horizontal | Horizontal border width | number; minimum: 0 | Required |
Enter nonnegative vertical and horizontal border widths in pixels. The tool copies them to the corresponding four physical sides. Zero is allowed and values are returned without conversion or rounding.
top = bottom = vertical; right = left = horizontal Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| top | Top width | number; minimum: 0 |
| right | Right width | number; minimum: 0 |
| bottom | Bottom width | number; minimum: 0 |
| left | Left width | number; minimum: 0 |
{
"input": {
"vertical": 2,
"horizontal": 5
},
"output": {
"top": 2,
"right": 5,
"bottom": 2,
"left": 5
}
}Limitations and assumptions
It does not parse thin/medium/thick keywords, CSS units or a full border shorthand. Border style, color, box-sizing and whether a border is actually painted are separate concerns. Logical-side mapping is not performed.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use Padding 3-Value Shorthand Expansion: Expand three nonnegative pixel paddings, using the second value for both left and right. For a complementary task, use Margin 4-Value Shorthand Expansion: Expand four finite pixel margins in top, right, bottom, left order.
References
-
Border-Width 2-Value Expansion — tool.io
Similar or alternative tools
- Padding 3-Value Shorthand Expansion
Expand three nonnegative pixel paddings, using the second value for both left and right.
- Margin 4-Value Shorthand Expansion
Expand four finite pixel margins in top, right, bottom, left order.