Skip to content

New data type page: line-width#44597

Open
estelle wants to merge 5 commits into
mainfrom
gaps4-line-width
Open

New data type page: line-width#44597
estelle wants to merge 5 commits into
mainfrom
gaps4-line-width

Conversation

@estelle

@estelle estelle commented Jun 29, 2026

Copy link
Copy Markdown
Member

The line-width data type is used in multiple properties. It's time it had a page.
reduces redundancy.

https://drafts.csswg.org/css-borders-4/#typedef-line-width defines hairline as a value I included it in the data-type page, along with an example and a no support message.

Part of openwebdocs/project#238

@estelle estelle requested a review from a team as a code owner June 29, 2026 11:12
@estelle estelle requested review from hamishwillee and removed request for a team June 29, 2026 11:12
@github-actions github-actions Bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Jun 29, 2026
@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor
Preview URLs (24 pages)
Flaws (9)

Note! 19 documents with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule
Title: column-rule CSS property
Flaw count: 1

  • macros:
    • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/column-rule-width
Title: column-rule-width CSS property
Flaw count: 1

  • macros:
    • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/number-token which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Properties/outline
Title: outline CSS property
Flaw count: 1

  • macros:
    • Macro csssyntax produces link /en-US/docs/Web/CSS/Reference/Values/flex which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Values/Data_types
Title: CSS data types
Flaw count: 2

  • macros:
    • Macro cssxref produces link /en-US/docs/Web/CSS/calc-product which doesn't resolve
    • Macro cssxref produces link /en-US/docs/Web/CSS/calc-value which doesn't resolve

URL: /en-US/docs/Web/CSS/Reference/Values/line-width
Title: <line-width> CSS type
Flaw count: 4

  • macros:
    • Macro cssxref produces link /en-US/docs/Web/CSS/row-rule which doesn't resolve
    • Macro cssxref produces link /en-US/docs/Web/CSS/row-rule-width which doesn't resolve
    • Macro cssxref produces link /en-US/docs/Web/CSS/rule which doesn't resolve
    • Macro cssxref produces link /en-US/docs/Web/CSS/rule-width which doesn't resolve

(comment last updated: 2026-07-03 09:54:18)

- `<'border-width'>`
- : The width of the border. See {{ cssxref("border-width") }}.
- {{cssxref("line-width")}}
- : Defines the width of the border, either as an explicit non-negative {{cssxref("&lt;length&gt;")}} or the keywords `thin`, `medium`, or `thick`. The default is `medium`.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, changed ll instances of nonnegative to non-negative. The vast majority of MDN uses this form.

- `<'border-width'>`
- {{cssxref("line-width")}}
- : The width of the border. See {{cssxref("border-width")}}.
- `<'border-style'>`

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The next case of this I saw was updated to {{cssxref("line-style")}} - is there a reason that this isn't? There are 5 or 6 of them.


- `<'column-rule-width'>`
- : Is a {{cssxref("&lt;length&gt;")}} or one of the three keywords, `thin`, `medium`, or `thick`. See {{cssxref("border-width")}} for details.
- : A {{cssxref("line-width")}}, being either a {{cssxref("&lt;length&gt;")}} or one of the keywords, `hairline`, `thin`, `medium`, or `thick`. See {{cssxref("column-rule-width")}}.

@hamishwillee hamishwillee Jul 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@estelle hairline appears to be in the spec, but one of your commits removed most of them. I still see a few, like this one. Most important, I see it as an allowed value.

What's the story - hairline only allowed in some properties? Or perhaps only currently supported in some properties?

Comment thread files/en-us/web/css/reference/values/line-width/index.md Outdated
- `<'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("&lt;length&gt;")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Every case should be a plural like this:

Suggested change
- : Defines the width of the border, either as an explicit nonnegative {{cssxref("&lt;length&gt;")}} or the keyword `thin`, `medium`, or `thick`. The default is `medium`.
- : Defines the width of the border, either as an explicit nonnegative {{cssxref("&lt;length&gt;")}} or the keywords: `thin`, `medium`, or `thick`. The default is `medium`.

short-title: <line-width>
slug: Web/CSS/Reference/Values/line-width
page-type: css-type
browser-compat: css.types.line-width

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NO compat. I presume this is to come.

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants