Skip to content

untangle border/column-rule/outline-width from *-style properties value #44195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
estelle merged 2 commits into from
Jun 22, 2026
Merged

untangle border/column-rule/outline-width from *-style properties value #44195

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
496853f
untangle `border/column-rule/outline-width` from `*-style` properties…
sb3nder May 19, 2026
5d730e8
Address review comments
sb3nder Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/web/css/reference/properties/border-style/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,9 @@ Each value is a keyword chosen from the list below.
- `<line-style>`
- : Describes the style of the border. It can have the following values:
- `none`
- : Like the `hidden` keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the computed value of the same side's {{cssxref("border-width")}} will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the _lowest_ priority: if any other conflicting border is set, it will be displayed.

@estelle estelle Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

this is actually important to explain.
if you do

border: 20px solid dashed;

and then:

border-style: hidden;

the box-model of that element is changed,

and then latter add this to the element:

border-style: dotted;

the border-width is 20px when shown as dotted.

this is true for both hidden and none

@sb3nder sb3nder Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I changed "computed value" to "used value", PTAL.

- : Like the `hidden` keyword, displays no border. Unless a {{cssxref("background-image")}} is set. In the case of table cell and border collapsing, the `none` value has the _lowest_ priority: if any other conflicting border is set, it will be displayed.
- `hidden`
- : Like the `none` keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the computed value of the same side's {{cssxref("border-width")}} will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the _highest_ priority: if any other conflicting border is set, it won't be displayed.
- : Like the `none` keyword, displays no border. Unless a {{cssxref("background-image")}} is set. In the case of table cell and border collapsing, the `hidden` value has the _highest_ priority: if any other conflicting border is set, it won't be displayed.
- `dotted`
- : Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's {{cssxref("border-width")}}.
- `dashed`
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/reference/properties/outline-style/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ The `outline-style` property is specified as any one of the values listed below.
- `auto`
- : Permits the user agent to render a custom outline style.
- `none`
- : No outline is used. The {{cssxref("outline-width")}} is `0`.
- : No outline is used.
- `dotted`
- : The outline is a series of dots.
- `dashed`
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/reference/properties/outline/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ An outline is not required to be rectangular: While dealing with multiline text,

## Accessibility

Assigning `outline` a value of `0` or `none` will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.
Comment thread
sb3nder marked this conversation as resolved.
Assigning `outline` a value of `none` will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

- [How to Design Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
- WCAG 2.1: [Understanding Success Criterion 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/reference/values/line-style/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ The **`<line-style>`** {{glossary("enumerated")}} value type represents keyword
The `<line-style>` enumerated type is specified using one of the values listed below:

- `none`
- : Displays no line. The computed value of the line width is `0` even if a width value is specified. In the case of table cell and border collapsing, the `none` value has the _lowest_ priority. If any other conflicting border is set, it will be displayed. The `none` value is similar to `hidden`.
- : Displays no line. In the case of table cell and border collapsing, the `none` value has the _lowest_ priority. If any other conflicting border is set, it will be displayed. The `none` value is similar to `hidden`.
- `hidden`
- : Displays no line. The computed width of the line is `0` even if a width value is specified. In the case of table cell and border collapsing, the `hidden` value has the _highest_ priority. If any other conflicting border is set, it won't be displayed. The `hidden` value is similar to `none`, but `hidden` is not a valid value for outline styles.
- : Displays no line. In the case of table cell and border collapsing, the `hidden` value has the _highest_ priority. If any other conflicting border is set, it won't be displayed. The `hidden` value is similar to `none`, but `hidden` is not a valid value for outline styles.
- `dotted`
- : Displays a series of round dots. The radius of the dots is half the computed value of the line's width. The spacing of the dots is not defined by the specification and is implementation-specific.
- `dashed`
Expand Down