Add 'constituent properties' section to all shorthand properties

files/en-us/web/css/-webkit-border-before/index.md

@@ -31,6 +31,14 @@ It relates to {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-sta
 
 This property is on the standard track as {{cssxref("border-block-start")}}.
 
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- {{cssxref("-webkit-border-before-color")}}
+- {{cssxref("-webkit-border-before-style")}}
+- {{cssxref("-webkit-border-before-width")}}
+
 ## Syntax
 
 ### Values

files/en-us/web/css/all/index.md

@@ -11,6 +11,10 @@ The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US
 
 {{EmbedInteractiveExample("pages/css/all.html")}}
 
+## Constituent properties
+
+This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+
 ## Syntax
 
 ```css

files/en-us/web/css/column-rule/index.md

@@ -11,9 +11,13 @@ The **`column-rule`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS
 
 {{EmbedInteractiveExample("pages/css/column-rule.html")}}
 
-It is a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) that sets the individual `column-rule-*` properties in a single, convenient declaration: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, and {{Cssxref("column-rule-color")}}.
+## Constituent properties
 
-> **Note:** As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties).
+This property is a shorthand for the following CSS properties:
+
+- {{Cssxref("column-rule-color")}}
+- {{Cssxref("column-rule-style")}}
+- {{Cssxref("column-rule-width")}}
 
 ## Syntax
 

files/en-us/web/css/container/index.md

@@ -9,6 +9,13 @@ browser-compat: css.properties.container
 
 The **container** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property establishes the element as a query container and specifies the name or name for the [containment context](/en-US/docs/Web/CSS/CSS_container_queries#naming_containment_contexts) used in a [container query](/en-US/docs/Web/CSS/CSS_container_queries).
 
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- {{Cssxref("container-name")}}
+- {{Cssxref("container-type")}}
+
 ## Syntax
 
 ```css

files/en-us/web/css/inset/index.md

@@ -13,6 +13,15 @@ The **`inset`** [CSS](/en-US/docs/Web/CSS) property is a shorthand that correspo
 
 While part of the _CSS Logical Properties_ specification, it does not define _logical_ offsets. It defines _physical_ offsets, regardless of the element's writing mode, directionality, and text orientation.
 
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- {{Cssxref("top")}}
+- {{Cssxref("right")}}
+- {{Cssxref("bottom")}}
+- {{Cssxref("left")}}
+
 ## Syntax
 
 ```css

files/en-us/web/css/overscroll-behavior/index.md

@@ -7,15 +7,16 @@ browser-compat: css.properties.overscroll-behavior
 
 {{CSSRef}}
 
-The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}.
+The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area.
 
 {{EmbedInteractiveExample("pages/css/overscroll-behavior.html")}}
 
-By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called **scroll chaining**.
+## Constituent properties
 
-In some cases these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.
+This property is a shorthand for the following CSS properties:
 
-Note that this property only applies to {{Glossary("Scroll_container", "scroll containers")}}. In particular, since an [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe) is not a scroll container, this property cannot be used to stop scroll chaining for iframes.
+- {{Cssxref("overscroll-behavior-x")}}
+- {{Cssxref("overscroll-behavior-y")}}
 
 ## Syntax
 
@@ -49,6 +50,14 @@ Two keywords specifies the `overscroll-behavior` value on the `x` and `y` axes r
 - `none`
   - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.
 
+## Description
+
+By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called **scroll chaining**.
+
+In some cases these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.
+
+Note that this property only applies to {{Glossary("Scroll_container", "scroll containers")}}. In particular, since an [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe) is not a scroll container, this property cannot be used to stop scroll chaining for iframes.
+
 ## Formal definition
 
 {{cssinfo}}