Open
Conversation
Hyphenated words and made a parallel structure.
github-actions
bot
added
Content:CSS
Contributor
|
Preview URLs (1 page) |
dipikabh
requested changes
Feb 19, 2026
| - **1-value syntax:** `border-radius: 1em` — A single value represents all corners:  | ||
|
|
||
| - **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top left and bottom right corner, the second the top right and bottom left ones:  | ||
| - **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top-left and bottom-right corner and the second values represents the top-right and bottom-left corners:  |
Contributor
There was a problem hiding this comment.
Suggested change
| - **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top-left and bottom-right corner and the second values represents the top-right and bottom-left corners:  | |
| - **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top-left and bottom-right corners, and the second value represents the top-right and bottom-left corners:  |
| - **3-value syntax:** `border-radius: 1em 2em 3em` — The first value represents the top-left corner, the second value represents the top-right and bottom-left corners, and the third value represents the bottom-right corner:  | ||
|
|
||
| - **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left:  | ||
| - **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top-left, top-right, bottom-right and bottom-left corners respectively, always in that order, that is clock-wise starting at the top-left:  |
Contributor
There was a problem hiding this comment.
Suggested change
| - **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top-left, top-right, bottom-right and bottom-left corners respectively, always in that order, that is clock-wise starting at the top-left:  | |
| - **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top-left, top-right, bottom-right, and bottom-left corners respectively, always in that order; that is, clock-wise starting at the top-left:  |
|
|
||
| Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: | ||
|
|
||
| - **1-value syntax:** `border-width: 1em` — The single value represents all edges:  |
Contributor
There was a problem hiding this comment.
While here, we can make a few similar updates to this section as well:
Suggested change
| - **1-value syntax:** `border-width: 1em` — A single value represents all edges:  |
Contributor
There was a problem hiding this comment.
Oh! I see you've made a separate PR for changes to this section: #43130
|
|
||
| - **1-value syntax:** `border-width: 1em` — The single value represents all edges:  | ||
|
|
||
| - **2-value syntax:** `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones:  |
Contributor
There was a problem hiding this comment.
to make this less confusing
Suggested change
| - **2-value syntax:** `border-width: 1em 2em` — The first value represents the top and bottom edges, and the second value represents the left and right edges:  |
|
|
||
| - **2-value syntax:** `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones:  | ||
|
|
||
| - **3-value syntax:** `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge:  |
Contributor
There was a problem hiding this comment.
Suggested change
| - **3-value syntax:** `border-width: 1em 2em 3em` — The first value represents the top edge, the second value represents the left and right edges, and the third value represents the bottom edge:  |
|
|
||
| - **3-value syntax:** `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge:  | ||
|
|
||
| - **4-value syntax:** `border-width: 1em 2em 3em 4em` — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top:  The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word _trouble_: TRBL. You can also remember it as the order that the hands would rotate on a clock: `1em` starts in the 12 o'clock position, then `2em` in the 3 o'clock position, then `3em` in the 6 o'clock position, and `4em` in the 9 o'clock position. |
Contributor
There was a problem hiding this comment.
Suggested change
| - **4-value syntax:** `border-width: 1em 2em 3em 4em` — The four values represent the top, the right, the bottom, and the left edges, respectively, always in that order; that is, clock-wise starting at the top:  The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word _trouble_: TRBL. You can also remember it as the order that the hands would rotate on a clock: `1em` starts in the 12 o'clock position, then `2em` in the 3 o'clock position, then `3em` in the 6 o'clock position, and `4em` in the 9 o'clock position. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hyphenated words and made a parallel structure.
Description
Hyphenated compound words like top-left, etc.
Made the sentences have parallel structure.
Motivation
The use of "top left" should be hyphenated to make a single compound modifier before the noun "corner".
Sentences should have parallel structure—"the first value represents..., the second value represents..."—to make the point clear and stronger.
Additional details
Purdue's OWL on when to hyphenate.
Related issues and pull requests