From b0661940c7e81b303af387e755b72de46988c0e1 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 29 Jun 2026 13:04:13 +0200 Subject: [PATCH 1/5] New data type page: line-width --- .../border-block-end-width/index.md | 6 +- .../properties/border-block-end/index.md | 2 +- .../border-block-start-width/index.md | 6 +- .../properties/border-block-start/index.md | 2 +- .../properties/border-block-width/index.md | 6 +- .../properties/border-block/index.md | 2 +- .../properties/border-bottom-width/index.md | 10 +- .../border-inline-end-width/index.md | 6 +- .../properties/border-inline-end/index.md | 2 +- .../border-inline-start-width/index.md | 6 +- .../properties/border-inline-start/index.md | 4 +- .../properties/border-inline-width/index.md | 6 +- .../properties/border-inline/index.md | 2 +- .../properties/border-left-width/index.md | 10 +- .../properties/border-right-width/index.md | 10 +- .../properties/border-top-width/index.md | 10 +- .../properties/border-width/index.md | 10 +- .../properties/column-rule-width/index.md | 6 +- .../reference/properties/column-rule/index.md | 6 +- .../properties/outline-width/index.md | 10 +- .../css/reference/properties/outline/index.md | 2 +- .../css/reference/values/data_types/index.md | 1 + .../css/reference/values/line-style/index.md | 1 + .../css/reference/values/line-width/index.md | 135 ++++++++++++++++++ 24 files changed, 181 insertions(+), 80 deletions(-) create mode 100644 files/en-us/web/css/reference/values/line-width/index.md diff --git a/files/en-us/web/css/reference/properties/border-block-end-width/index.md b/files/en-us/web/css/reference/properties/border-block-end-width/index.md index 4212e93b61dc217..839b6ffd69189ae 100644 --- a/files/en-us/web/css/reference/properties/border-block-end-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-end-width/index.md @@ -54,7 +54,7 @@ writing-mode: vertical-lr; ## Syntax ```css -/* <'border-width'> values */ +/* <'line-width'> values */ border-block-end-width: 5px; border-block-end-width: thick; @@ -70,8 +70,8 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values -- `<'border-width'>` - - : The width of the border. See {{ cssxref("border-width") }}. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block-end/index.md b/files/en-us/web/css/reference/properties/border-block-end/index.md index de3207cf8443bc3..76fb14f23bf2019 100644 --- a/files/en-us/web/css/reference/properties/border-block-end/index.md +++ b/files/en-us/web/css/reference/properties/border-block-end/index.md @@ -81,7 +81,7 @@ Related properties are {{cssxref("border-block-start")}}, {{cssxref("border-inli The `border-block-end` is specified with one or more of the following, in any order: -- `<'border-width'>` +- {{cssxref("line-width")}} - : The width of the border. See {{cssxref("border-width")}}. - `<'border-style'>` - : The line style of the border. See {{cssxref("border-style")}}. diff --git a/files/en-us/web/css/reference/properties/border-block-start-width/index.md b/files/en-us/web/css/reference/properties/border-block-start-width/index.md index 8b834cef6fb9c66..bee9f5a79365bc3 100644 --- a/files/en-us/web/css/reference/properties/border-block-start-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-start-width/index.md @@ -54,7 +54,7 @@ writing-mode: vertical-lr; ## Syntax ```css -/* <'border-width'> values */ +/* <'line-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; @@ -70,8 +70,8 @@ Related properties are {{cssxref("border-block-end-width")}}, {{cssxref("border- ### Values -- `<'border-width'>` - - : The width of the border. See {{ cssxref("border-width") }}. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block-start/index.md b/files/en-us/web/css/reference/properties/border-block-start/index.md index d1059b9aa887ace..162d034b0e57e2b 100644 --- a/files/en-us/web/css/reference/properties/border-block-start/index.md +++ b/files/en-us/web/css/reference/properties/border-block-start/index.md @@ -81,7 +81,7 @@ Related properties are {{cssxref("border-block-end")}}, {{cssxref("border-inline The `border-block-start` is specified with one or more of the following, in any order: -- `<'border-width'>` +- {{cssxref("line-width")}} - : The width of the border. See {{cssxref("border-width")}}. - `<'border-style'>` - : The line style of the border. See {{cssxref("border-style")}}. diff --git a/files/en-us/web/css/reference/properties/border-block-width/index.md b/files/en-us/web/css/reference/properties/border-block-width/index.md index 7f6e1137f82c0ba..54aad9c52c0618d 100644 --- a/files/en-us/web/css/reference/properties/border-block-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-width/index.md @@ -52,7 +52,7 @@ direction: rtl; ## Syntax ```css -/* <'border-width'> values */ +/* <'line-width'> values */ border-block-width: 5px; border-block-width: thick; @@ -66,8 +66,8 @@ border-block-width: unset; ### Values -- `<'border-width'>` - - : The width of the border. See {{ cssxref("border-width") }}. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block/index.md b/files/en-us/web/css/reference/properties/border-block/index.md index 424e41328ee5ced..067d578baedf945 100644 --- a/files/en-us/web/css/reference/properties/border-block/index.md +++ b/files/en-us/web/css/reference/properties/border-block/index.md @@ -73,7 +73,7 @@ border-block: unset; The `border-block` is specified with one or more of the following, in any order: -- `<'border-width'>` +- {{cssxref("line-width")}} - : The width of the border. See {{cssxref("border-width")}}. - `<'border-style'>` - : The line style of the border. See {{cssxref("border-style")}}. diff --git a/files/en-us/web/css/reference/properties/border-bottom-width/index.md b/files/en-us/web/css/reference/properties/border-bottom-width/index.md index 02255aa8114a594..dcf3a980a14792b 100644 --- a/files/en-us/web/css/reference/properties/border-bottom-width/index.md +++ b/files/en-us/web/css/reference/properties/border-bottom-width/index.md @@ -73,14 +73,8 @@ border-bottom-width: unset; ### Values -- `` - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or a keyword. If it's a keyword, it must be one of the following values: - - `thin` - - Same as `1px`. - - `medium` - - Same as `3px`. - - `thick` - - Same as `5px`. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-end-width/index.md b/files/en-us/web/css/reference/properties/border-inline-end-width/index.md index 7dd668480644b3a..795940b19fb2671 100644 --- a/files/en-us/web/css/reference/properties/border-inline-end-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-end-width/index.md @@ -50,7 +50,7 @@ direction: rtl; ## Syntax ```css -/* <'border-width'> values */ +/* <'line-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; @@ -66,8 +66,8 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values -- `<'border-width'>` - - : The width of the border. See {{ cssxref("border-width") }}. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-end/index.md b/files/en-us/web/css/reference/properties/border-inline-end/index.md index 681501ee72a9deb..fc902b30ce85df7 100644 --- a/files/en-us/web/css/reference/properties/border-inline-end/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-end/index.md @@ -77,7 +77,7 @@ Related properties are {{cssxref("border-block-start")}}, {{cssxref("border-bloc The `border-inline-end` is specified with one or more of the following, in any order: -- `<'border-width'>` +- {{cssxref("line-width")}} - : The width of the border. See {{cssxref("border-width")}}. - `<'border-style'>` - : The line style of the border. See {{cssxref("border-style")}}. diff --git a/files/en-us/web/css/reference/properties/border-inline-start-width/index.md b/files/en-us/web/css/reference/properties/border-inline-start-width/index.md index 146f25c8469c711..988a8fceb12b5dc 100644 --- a/files/en-us/web/css/reference/properties/border-inline-start-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-start-width/index.md @@ -50,7 +50,7 @@ direction: rtl; ## Syntax ```css -/* <'border-width'> values */ +/* <'line-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick; @@ -66,8 +66,8 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values -- `<'border-width'>` - - : The width of the border. See {{ cssxref("border-width") }}. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-start/index.md b/files/en-us/web/css/reference/properties/border-inline-start/index.md index 95da9b19d2ba78a..f14d19c44b6b5ec 100644 --- a/files/en-us/web/css/reference/properties/border-inline-start/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-start/index.md @@ -77,9 +77,9 @@ Related properties are {{cssxref("border-block-start")}}, {{cssxref("border-bloc The `border-inline-start` is specified with one or more of the following, in any order: -- `<'border-width'>` +- {{cssxref("line-width")}} - : The width of the border. See {{cssxref("border-width")}}. -- `<'border-style'>` +- {{cssxref("line-style")}} - : The line style of the border. See {{cssxref("border-style")}}. - {{CSSXref("<color>")}} - : The color of the border. diff --git a/files/en-us/web/css/reference/properties/border-inline-width/index.md b/files/en-us/web/css/reference/properties/border-inline-width/index.md index 511064399c2ee42..60abc7a149695b9 100644 --- a/files/en-us/web/css/reference/properties/border-inline-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-width/index.md @@ -52,7 +52,7 @@ direction: rtl; ## Syntax ```css -/* <'border-width'> values */ +/* <'line-width'> values */ border-inline-width: 5px 10px; border-inline-width: 5px; border-inline-width: thick; @@ -67,8 +67,8 @@ border-inline-width: unset; ### Values -- `<'border-width'>` - - : The width of the border. See {{ cssxref("border-width") }}. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline/index.md b/files/en-us/web/css/reference/properties/border-inline/index.md index ac269ee17c1733b..94e636c31e46ea8 100644 --- a/files/en-us/web/css/reference/properties/border-inline/index.md +++ b/files/en-us/web/css/reference/properties/border-inline/index.md @@ -73,7 +73,7 @@ border-inline: unset; The `border-inline` is specified with one or more of the following, in any order: -- `<'border-width'>` +- {{cssxref("line-width")}} - : The width of the border. See {{cssxref("border-width")}}. - `<'border-style'>` - : The line style of the border. See {{cssxref("border-style")}}. diff --git a/files/en-us/web/css/reference/properties/border-left-width/index.md b/files/en-us/web/css/reference/properties/border-left-width/index.md index 00b7c9b1fd94251..f4b5dd707e37688 100644 --- a/files/en-us/web/css/reference/properties/border-left-width/index.md +++ b/files/en-us/web/css/reference/properties/border-left-width/index.md @@ -73,14 +73,8 @@ border-left-width: unset; ### Values -- `` - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or a keyword. If it's a keyword, it must be one of the following values: - - `thin` - - Same as `1px`. - - `medium` - - Same as `3px`. - - `thick` - - Same as `5px`. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-right-width/index.md b/files/en-us/web/css/reference/properties/border-right-width/index.md index 5d146cc06f33a75..8e47103c2080d0b 100644 --- a/files/en-us/web/css/reference/properties/border-right-width/index.md +++ b/files/en-us/web/css/reference/properties/border-right-width/index.md @@ -73,14 +73,8 @@ border-right-width: unset; ### Values -- `` - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or a keyword. If it's a keyword, it must be one of the following values: - - `thin` - - Same as `1px`. - - `medium` - - Same as `3px`. - - `thick` - - Same as `5px`. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-top-width/index.md b/files/en-us/web/css/reference/properties/border-top-width/index.md index 9a53e5272bd7b71..4618b91dd71ec04 100644 --- a/files/en-us/web/css/reference/properties/border-top-width/index.md +++ b/files/en-us/web/css/reference/properties/border-top-width/index.md @@ -73,14 +73,8 @@ border-top-width: unset; ### Values -- `` - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or a keyword. If it's a keyword, it must be one of the following values: - - `thin` - - Same as `1px`. - - `medium` - - Same as `3px`. - - `thick` - - Same as `5px`. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-width/index.md b/files/en-us/web/css/reference/properties/border-width/index.md index 8d5a1956bc83994..62ed390d8d85cf5 100644 --- a/files/en-us/web/css/reference/properties/border-width/index.md +++ b/files/en-us/web/css/reference/properties/border-width/index.md @@ -97,14 +97,8 @@ The `border-width` property may be specified using one, two, three, or four valu ### Values -- `` - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or a keyword. If it's a keyword, it must be one of the following values: - - `thin` - - Same as `1px`. - - `medium` - - Same as `3px`. - - `thick` - - Same as `5px`. +- {{cssxref("line-width")}} + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/column-rule-width/index.md b/files/en-us/web/css/reference/properties/column-rule-width/index.md index 55e005837d181c6..0b9d6e9903f6cd3 100644 --- a/files/en-us/web/css/reference/properties/column-rule-width/index.md +++ b/files/en-us/web/css/reference/properties/column-rule-width/index.md @@ -67,12 +67,12 @@ column-rule-width: revert-layer; column-rule-width: unset; ``` -The `column-rule-width` property is specified as a single `<'border-width'>` value. +The `column-rule-width` property is specified as a single `<'line-width'>` value. ### Values -- `<'border-width'>` - - : Is a keyword defined by {{ cssxref("border-width") }} describing the width of the rule. It may be either a {{cssxref("<length>")}} or one of the `thin`, `medium`, or `thick` keywords. +- {{cssxref("line-width")}} + - : An explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`, describing the width of the rule. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/column-rule/index.md b/files/en-us/web/css/reference/properties/column-rule/index.md index 2293d8684d3d06c..d4a2cc99734d08c 100644 --- a/files/en-us/web/css/reference/properties/column-rule/index.md +++ b/files/en-us/web/css/reference/properties/column-rule/index.md @@ -76,11 +76,11 @@ column-rule: unset; The `column-rule` property is specified as one, two, or three of the values listed below, in any order. - `<'column-rule-width'>` - - : Is a {{cssxref("<length>")}} or one of the three keywords, `thin`, `medium`, or `thick`. See {{cssxref("border-width")}} for details. + - : A {{cssxref("line-width")}}, being either a {{cssxref("<length>")}} or one of the keywords, `hairline`, `thin`, `medium`, or `thick`. See {{cssxref("column-rule-width")}}. - `<'column-rule-style'>` - - : See {{cssxref("border-style")}} for possible values and details. + - : A {{cssxref("line-style")}} keyword value. See {{cssxref("border-style")}}.. - `<'column-rule-color'>` - - : Is a {{cssxref("<color>")}} value. + - : A {{cssxref("<color>")}} value. See {{cssxref("column-rule-color")}}. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/outline-width/index.md b/files/en-us/web/css/reference/properties/outline-width/index.md index e5e31480ee39877..e1076f292a8c6de 100644 --- a/files/en-us/web/css/reference/properties/outline-width/index.md +++ b/files/en-us/web/css/reference/properties/outline-width/index.md @@ -70,14 +70,8 @@ The `outline-width` property is specified as any one of the values listed below. ### Values -- {{cssxref("<length>")}} - - : The width of the outline specified as a ``. -- `thin` - - : Depends on the user agent. Typically equivalent to `1px` in desktop browsers (including Firefox). -- `medium` - - : Depends on the user agent. Typically equivalent to `3px` in desktop browsers (including Firefox). -- `thick` - - : Depends on the user agent. Typically equivalent to `5px` in desktop browsers (including Firefox). +- {{cssxref("line-width")}} + - : Defines the width of the outline, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/outline/index.md b/files/en-us/web/css/reference/properties/outline/index.md index 77074b74d426d1f..194e4f4e4b21769 100644 --- a/files/en-us/web/css/reference/properties/outline/index.md +++ b/files/en-us/web/css/reference/properties/outline/index.md @@ -87,7 +87,7 @@ The `outline` property may be specified using one, two, or three of the values l ### Values - `<'outline-width'>` - - : Sets the thickness of the outline. Defaults to `medium` if absent. See {{cssxref("outline-width")}}. + - : A {{cssxref("line-width")}} value setting the thickness of the outline. Defaults to `medium` if absent. See {{cssxref("outline-width")}}. - `<'outline-style'>` - : Sets the style of the outline. Defaults to `none` if absent. See {{cssxref("outline-style")}}. - `<'outline-color'>` diff --git a/files/en-us/web/css/reference/values/data_types/index.md b/files/en-us/web/css/reference/values/data_types/index.md index 77191a8dfe77390..e470df76da2cd73 100644 --- a/files/en-us/web/css/reference/values/data_types/index.md +++ b/files/en-us/web/css/reference/values/data_types/index.md @@ -192,6 +192,7 @@ The [CSS shapes](/en-US/docs/Web/CSS/Guides/Shapes) and [CSS borders and box dec - {{cssxref("length")}} - {{cssxref("length-percentage")}} - {{cssxref("line-style")}} +- {{cssxref("line-width")}} - {{cssxref("named-color")}} - {{cssxref("number")}} - {{cssxref("overflow_value", "<overflow>")}} diff --git a/files/en-us/web/css/reference/values/line-style/index.md b/files/en-us/web/css/reference/values/line-style/index.md index 0aa7bcabc8187cd..437480d96ef0194 100644 --- a/files/en-us/web/css/reference/values/line-style/index.md +++ b/files/en-us/web/css/reference/values/line-style/index.md @@ -269,6 +269,7 @@ Notice that the almost-black color of `#000001` may be different from the actual ## See also +- {{cssxref("line-width")}} data type - [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module - [CSS basic user interface](/en-US/docs/Web/CSS/Guides/Basic_user_interface) module - [CSS multi-column layout](/en-US/docs/Web/CSS/Guides/Multicol_layout) module diff --git a/files/en-us/web/css/reference/values/line-width/index.md b/files/en-us/web/css/reference/values/line-width/index.md new file mode 100644 index 000000000000000..52d8dfd136aec6f --- /dev/null +++ b/files/en-us/web/css/reference/values/line-width/index.md @@ -0,0 +1,135 @@ +--- +title: "`` CSS type" +short-title: +slug: Web/CSS/Reference/Values/line-width +page-type: css-type +browser-compat: css.types.line-width +spec-urls: https://drafts.csswg.org/css-backgrounds/#typedef-line-width +sidebar: cssref +--- + +The **``** {{glossary("enumerated")}} value type represents keyword values that define the style of a line, or the lack of a line. The `` keyword values are used in the following longhand and shorthand properties: + +- {{cssxref("border")}}, {{cssxref("border-width")}} +- {{cssxref("border-block")}}, {{cssxref("border-block-width")}} +- {{cssxref("border-block-end")}}, {{cssxref("border-block-end-width")}} +- {{cssxref("border-block-start")}}, {{cssxref("border-block-start-width")}} +- {{cssxref("border-bottom")}}, {{cssxref("border-bottom-width")}} +- {{cssxref("border-inline")}}, {{cssxref("border-inline-width")}} +- {{cssxref("border-inline-end")}}, {{cssxref("border-inline-end-width")}} +- {{cssxref("border-inline-start")}}, {{cssxref("border-inline-start-width")}} +- {{cssxref("border-left")}}, {{cssxref("border-left-width")}} +- {{cssxref("border-right")}}, {{cssxref("border-right-width")}} +- {{cssxref("border-top")}}, {{cssxref("border-top-width")}} +- {{cssxref("column-rule")}}, {{cssxref("column-rule-width")}} +- {{cssxref("row-rule")}}, {{cssxref("row-rule-width")}} +- {{cssxref("rule")}}, {{cssxref("rule-width")}} +- {{cssxref("outline")}}, {{cssxref("outline-width")}} + +## Syntax + +### Values + +The `` type is specified using either `` or a keyword: + +- `` + - : A non-negative {{cssxref("<length>")}} +- `hairline` + - : Represents a "just visible" that is less than or equal to `1px` that is an integer number of device pixels at the default page zoom. While it can be as large as 1px, depending on the device, it will generally be `0.3px` to `0.5px`. +- `thin` + - : Same as `1px`. +- `medium` + - : Same as `3px`. +- `thick` + - : Same as `5px`. + +## Formal syntax + +{{CSSSyntaxRaw(` = | hairline | thin | medium | thick`)}} + +## Examples + +### Defining a line width + +This example demonstrates all the `` keyword values, along with a `` value. + +#### HTML + +We include five boxes within a {{htmlelement("section")}} element. + +```html +
+
hairline
+
thin
+
medium
+
thick
+
10px
+
+``` + +#### CSS + +We style all the elements to be identical, then set the {{cssxref("border-width")}} based on the element's `data-width` attribute. + +```css +section { + display: flex; + gap: 10px; +} +div { + flex: 0 0 15%; + border-style: solid; + border-color: purple; + text-align: center; +} +[data-width="hairline"] { + border-width: hairline; +} + +[data-width="thin"] { + border-width: thin; +} + +[data-width="medium"] { + border-width: medium; +} + +[data-width="thick"] { + border-width: thick; +} + +[data-width="10px"] { + border-width: 10px; +} +``` + +```css hidden +@supports not (border-width: hairline) { + body::before { + content: "Your browser does not support the 'hairline' value."; + color: black; + background-color: #ffcd33; + display: block; + width: 100%; + text-align: center; + } +} +``` + +#### Results + +{{ EmbedLiveSample('Defining a line width') }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module +- [CSS basic user interface](/en-US/docs/Web/CSS/Guides/Basic_user_interface) module +- [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module From d40021d2f119914ac1dfe9db0f70280bfd6e7789 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 29 Jun 2026 13:08:40 +0200 Subject: [PATCH 2/5] remove hairline --- .../css/reference/properties/border-block-end-width/index.md | 2 +- .../css/reference/properties/border-block-start-width/index.md | 2 +- .../web/css/reference/properties/border-block-width/index.md | 2 +- .../web/css/reference/properties/border-bottom-width/index.md | 2 +- .../css/reference/properties/border-inline-end-width/index.md | 2 +- .../css/reference/properties/border-inline-start-width/index.md | 2 +- .../web/css/reference/properties/border-inline-width/index.md | 2 +- .../web/css/reference/properties/border-left-width/index.md | 2 +- .../web/css/reference/properties/border-right-width/index.md | 2 +- .../web/css/reference/properties/border-top-width/index.md | 2 +- files/en-us/web/css/reference/properties/border-width/index.md | 2 +- .../web/css/reference/properties/column-rule-width/index.md | 2 +- files/en-us/web/css/reference/properties/outline-width/index.md | 2 +- 13 files changed, 13 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/css/reference/properties/border-block-end-width/index.md b/files/en-us/web/css/reference/properties/border-block-end-width/index.md index 839b6ffd69189ae..ac184e9805ae183 100644 --- a/files/en-us/web/css/reference/properties/border-block-end-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-end-width/index.md @@ -71,7 +71,7 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block-start-width/index.md b/files/en-us/web/css/reference/properties/border-block-start-width/index.md index bee9f5a79365bc3..7233adf1181a67b 100644 --- a/files/en-us/web/css/reference/properties/border-block-start-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-start-width/index.md @@ -71,7 +71,7 @@ Related properties are {{cssxref("border-block-end-width")}}, {{cssxref("border- ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block-width/index.md b/files/en-us/web/css/reference/properties/border-block-width/index.md index 54aad9c52c0618d..86e618d5b1f7c13 100644 --- a/files/en-us/web/css/reference/properties/border-block-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-width/index.md @@ -67,7 +67,7 @@ border-block-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-bottom-width/index.md b/files/en-us/web/css/reference/properties/border-bottom-width/index.md index dcf3a980a14792b..68edcdd507b7827 100644 --- a/files/en-us/web/css/reference/properties/border-bottom-width/index.md +++ b/files/en-us/web/css/reference/properties/border-bottom-width/index.md @@ -74,7 +74,7 @@ border-bottom-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-end-width/index.md b/files/en-us/web/css/reference/properties/border-inline-end-width/index.md index 795940b19fb2671..8ac7717cf5c1f31 100644 --- a/files/en-us/web/css/reference/properties/border-inline-end-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-end-width/index.md @@ -67,7 +67,7 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-start-width/index.md b/files/en-us/web/css/reference/properties/border-inline-start-width/index.md index 988a8fceb12b5dc..fe6bbe15e7eb720 100644 --- a/files/en-us/web/css/reference/properties/border-inline-start-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-start-width/index.md @@ -67,7 +67,7 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-width/index.md b/files/en-us/web/css/reference/properties/border-inline-width/index.md index 60abc7a149695b9..f309c602c9de52a 100644 --- a/files/en-us/web/css/reference/properties/border-inline-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-width/index.md @@ -68,7 +68,7 @@ border-inline-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-left-width/index.md b/files/en-us/web/css/reference/properties/border-left-width/index.md index f4b5dd707e37688..feaff4e63179365 100644 --- a/files/en-us/web/css/reference/properties/border-left-width/index.md +++ b/files/en-us/web/css/reference/properties/border-left-width/index.md @@ -74,7 +74,7 @@ border-left-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-right-width/index.md b/files/en-us/web/css/reference/properties/border-right-width/index.md index 8e47103c2080d0b..c5edd1c3cfff2ff 100644 --- a/files/en-us/web/css/reference/properties/border-right-width/index.md +++ b/files/en-us/web/css/reference/properties/border-right-width/index.md @@ -74,7 +74,7 @@ border-right-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-top-width/index.md b/files/en-us/web/css/reference/properties/border-top-width/index.md index 4618b91dd71ec04..2e7136332d6f6fe 100644 --- a/files/en-us/web/css/reference/properties/border-top-width/index.md +++ b/files/en-us/web/css/reference/properties/border-top-width/index.md @@ -74,7 +74,7 @@ border-top-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-width/index.md b/files/en-us/web/css/reference/properties/border-width/index.md index 62ed390d8d85cf5..41fdb4553b1812d 100644 --- a/files/en-us/web/css/reference/properties/border-width/index.md +++ b/files/en-us/web/css/reference/properties/border-width/index.md @@ -98,7 +98,7 @@ The `border-width` property may be specified using one, two, three, or four valu ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/column-rule-width/index.md b/files/en-us/web/css/reference/properties/column-rule-width/index.md index 0b9d6e9903f6cd3..291551af4f62f24 100644 --- a/files/en-us/web/css/reference/properties/column-rule-width/index.md +++ b/files/en-us/web/css/reference/properties/column-rule-width/index.md @@ -72,7 +72,7 @@ The `column-rule-width` property is specified as a single `<'line-width'>` value ### Values - {{cssxref("line-width")}} - - : An explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`, describing the width of the rule. The default is `medium`. + - : An explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`, describing the width of the rule. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/outline-width/index.md b/files/en-us/web/css/reference/properties/outline-width/index.md index e1076f292a8c6de..71606ea8a34e94f 100644 --- a/files/en-us/web/css/reference/properties/outline-width/index.md +++ b/files/en-us/web/css/reference/properties/outline-width/index.md @@ -71,7 +71,7 @@ The `outline-width` property is specified as any one of the values listed below. ### Values - {{cssxref("line-width")}} - - : Defines the width of the outline, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `hairline`, `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the outline, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition From b9b5f24e1d46c16206eb3edf0eb1ac60218c92fc Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 29 Jun 2026 13:16:29 +0200 Subject: [PATCH 3/5] add style to see also --- files/en-us/web/css/reference/values/line-width/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/reference/values/line-width/index.md b/files/en-us/web/css/reference/values/line-width/index.md index 52d8dfd136aec6f..c46377e943b32d7 100644 --- a/files/en-us/web/css/reference/values/line-width/index.md +++ b/files/en-us/web/css/reference/values/line-width/index.md @@ -130,6 +130,7 @@ div { ## See also +- {{cssxref("line-style")}} data type - [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module - [CSS basic user interface](/en-US/docs/Web/CSS/Guides/Basic_user_interface) module - [CSS gaps](/en-US/docs/Web/CSS/Guides/Gaps) module From e874515bf6147cb6e65c8c40a09ae1008c80f680 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Fri, 3 Jul 2026 16:20:17 +1000 Subject: [PATCH 4/5] Fix nonnegative --- .../css/reference/properties/border-block-end-width/index.md | 2 +- .../css/reference/properties/border-block-start-width/index.md | 2 +- .../web/css/reference/properties/border-block-width/index.md | 2 +- .../web/css/reference/properties/border-bottom-width/index.md | 2 +- .../css/reference/properties/border-inline-end-width/index.md | 2 +- .../css/reference/properties/border-inline-start-width/index.md | 2 +- .../web/css/reference/properties/border-inline-width/index.md | 2 +- .../web/css/reference/properties/border-left-width/index.md | 2 +- .../web/css/reference/properties/border-right-width/index.md | 2 +- .../web/css/reference/properties/border-top-width/index.md | 2 +- files/en-us/web/css/reference/properties/border-width/index.md | 2 +- .../web/css/reference/properties/column-rule-width/index.md | 2 +- files/en-us/web/css/reference/properties/column-rule/index.md | 2 +- files/en-us/web/css/reference/properties/outline-width/index.md | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/files/en-us/web/css/reference/properties/border-block-end-width/index.md b/files/en-us/web/css/reference/properties/border-block-end-width/index.md index ac184e9805ae183..1421d9fa45475d3 100644 --- a/files/en-us/web/css/reference/properties/border-block-end-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-end-width/index.md @@ -71,7 +71,7 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block-start-width/index.md b/files/en-us/web/css/reference/properties/border-block-start-width/index.md index 7233adf1181a67b..534029b41b40495 100644 --- a/files/en-us/web/css/reference/properties/border-block-start-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-start-width/index.md @@ -71,7 +71,7 @@ Related properties are {{cssxref("border-block-end-width")}}, {{cssxref("border- ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-block-width/index.md b/files/en-us/web/css/reference/properties/border-block-width/index.md index 86e618d5b1f7c13..7ec61cde06d9f6c 100644 --- a/files/en-us/web/css/reference/properties/border-block-width/index.md +++ b/files/en-us/web/css/reference/properties/border-block-width/index.md @@ -67,7 +67,7 @@ border-block-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-bottom-width/index.md b/files/en-us/web/css/reference/properties/border-bottom-width/index.md index 68edcdd507b7827..cae14f091cfe5c6 100644 --- a/files/en-us/web/css/reference/properties/border-bottom-width/index.md +++ b/files/en-us/web/css/reference/properties/border-bottom-width/index.md @@ -74,7 +74,7 @@ border-bottom-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-end-width/index.md b/files/en-us/web/css/reference/properties/border-inline-end-width/index.md index 8ac7717cf5c1f31..2367d23c1764aab 100644 --- a/files/en-us/web/css/reference/properties/border-inline-end-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-end-width/index.md @@ -67,7 +67,7 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-start-width/index.md b/files/en-us/web/css/reference/properties/border-inline-start-width/index.md index fe6bbe15e7eb720..93103ef10f04ba0 100644 --- a/files/en-us/web/css/reference/properties/border-inline-start-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-start-width/index.md @@ -67,7 +67,7 @@ Related properties are {{cssxref("border-block-start-width")}}, {{cssxref("borde ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-inline-width/index.md b/files/en-us/web/css/reference/properties/border-inline-width/index.md index f309c602c9de52a..25cea49903786c8 100644 --- a/files/en-us/web/css/reference/properties/border-inline-width/index.md +++ b/files/en-us/web/css/reference/properties/border-inline-width/index.md @@ -68,7 +68,7 @@ border-inline-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-left-width/index.md b/files/en-us/web/css/reference/properties/border-left-width/index.md index feaff4e63179365..34913e1c0e94ee1 100644 --- a/files/en-us/web/css/reference/properties/border-left-width/index.md +++ b/files/en-us/web/css/reference/properties/border-left-width/index.md @@ -74,7 +74,7 @@ border-left-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-right-width/index.md b/files/en-us/web/css/reference/properties/border-right-width/index.md index c5edd1c3cfff2ff..f235e8d7021a7c0 100644 --- a/files/en-us/web/css/reference/properties/border-right-width/index.md +++ b/files/en-us/web/css/reference/properties/border-right-width/index.md @@ -74,7 +74,7 @@ border-right-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-top-width/index.md b/files/en-us/web/css/reference/properties/border-top-width/index.md index 2e7136332d6f6fe..207f4542f4335e0 100644 --- a/files/en-us/web/css/reference/properties/border-top-width/index.md +++ b/files/en-us/web/css/reference/properties/border-top-width/index.md @@ -74,7 +74,7 @@ border-top-width: unset; ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/border-width/index.md b/files/en-us/web/css/reference/properties/border-width/index.md index 41fdb4553b1812d..8c96211edcf23d9 100644 --- a/files/en-us/web/css/reference/properties/border-width/index.md +++ b/files/en-us/web/css/reference/properties/border-width/index.md @@ -98,7 +98,7 @@ The `border-width` property may be specified using one, two, three, or four valu ### Values - {{cssxref("line-width")}} - - : Defines the width of the border, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the border, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/column-rule-width/index.md b/files/en-us/web/css/reference/properties/column-rule-width/index.md index 291551af4f62f24..32bab04f80f6a1d 100644 --- a/files/en-us/web/css/reference/properties/column-rule-width/index.md +++ b/files/en-us/web/css/reference/properties/column-rule-width/index.md @@ -72,7 +72,7 @@ The `column-rule-width` property is specified as a single `<'line-width'>` value ### Values - {{cssxref("line-width")}} - - : An explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`, describing the width of the rule. The default is `medium`. + - : An explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`, describing the width of the rule. The default is `medium`. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/column-rule/index.md b/files/en-us/web/css/reference/properties/column-rule/index.md index d4a2cc99734d08c..1d658634fe17893 100644 --- a/files/en-us/web/css/reference/properties/column-rule/index.md +++ b/files/en-us/web/css/reference/properties/column-rule/index.md @@ -78,7 +78,7 @@ The `column-rule` property is specified as one, two, or three of the values list - `<'column-rule-width'>` - : A {{cssxref("line-width")}}, being either a {{cssxref("<length>")}} or one of the keywords, `hairline`, `thin`, `medium`, or `thick`. See {{cssxref("column-rule-width")}}. - `<'column-rule-style'>` - - : A {{cssxref("line-style")}} keyword value. See {{cssxref("border-style")}}.. + - : A {{cssxref("line-style")}} keyword value. See {{cssxref("border-style")}}. - `<'column-rule-color'>` - : A {{cssxref("<color>")}} value. See {{cssxref("column-rule-color")}}. diff --git a/files/en-us/web/css/reference/properties/outline-width/index.md b/files/en-us/web/css/reference/properties/outline-width/index.md index 71606ea8a34e94f..9b343d7c923f7c7 100644 --- a/files/en-us/web/css/reference/properties/outline-width/index.md +++ b/files/en-us/web/css/reference/properties/outline-width/index.md @@ -71,7 +71,7 @@ The `outline-width` property is specified as any one of the values listed below. ### Values - {{cssxref("line-width")}} - - : Defines the width of the outline, either as an explicit nonnegative {{cssxref("<length>")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`. + - : Defines the width of the outline, either as an explicit non-negative {{cssxref("<length>")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`. ## Formal definition From 8a88b81a355676cde63c85d106a25ac48b1b6f7e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 3 Jul 2026 11:52:48 +0200 Subject: [PATCH 5/5] Update files/en-us/web/css/reference/values/line-width/index.md Co-authored-by: Hamish Willee --- files/en-us/web/css/reference/values/line-width/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/reference/values/line-width/index.md b/files/en-us/web/css/reference/values/line-width/index.md index c46377e943b32d7..d2a544bf923bd00 100644 --- a/files/en-us/web/css/reference/values/line-width/index.md +++ b/files/en-us/web/css/reference/values/line-width/index.md @@ -35,7 +35,7 @@ The `` type is specified using either `` or a keyword: - `` - : A non-negative {{cssxref("<length>")}} - `hairline` - - : Represents a "just visible" that is less than or equal to `1px` that is an integer number of device pixels at the default page zoom. While it can be as large as 1px, depending on the device, it will generally be `0.3px` to `0.5px`. + - : Represents a "just visible" line that is less than or equal to `1px`. At the default page zoom it is an integer number of device pixels. While it can be as large as 1px, depending on the device, it will generally be `0.3px` to `0.5px`. - `thin` - : Same as `1px`. - `medium`