How do custom properties inherit, and when does @property change that behavior?

An unregistered custom property such as --accent inherits from its parent, so a descendant can use the value unless it has its own applicable declaration. It is not a global variable: the value follows the element tree and can differ between branches. Its value is resolved where it is used, rather than being stored and reused across unrelated elements. [S1]

For example:

:root {
  --accent: teal;
}

.card {
  color: var(--accent);
}

.card.special {
  --accent: rebeccapurple;
}

A regular .card gets the inherited teal value from :root. A .card.special uses its own rebeccapurple declaration; descendants of that special card inherit that value unless they override it. A separate branch of the document tree is not changed just because one card overrides the property.

Registration lets you set rules for the property instead of relying on the usual inheritance behavior. In particular, syntax describes accepted value types, inherits controls inheritance, and initial-value provides a starting value. A registration needs both syntax and inherits. [S2]

Here is a separate example for a length-valued spacing property:

@property --panel-gap {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.panel {
  --panel-gap: 1rem;
}

.panel .item {
  margin-block-start: var(--panel-gap);
}

With inherits: false, .item does not inherit the 1rem value declared on .panel. In this example, it uses the registered initial value, 0px, unless it has its own --panel-gap declaration. The syntax descriptor identifies the intended value type; it does not make this property inherit.

Choose inheritance based on how you want the value to travel through the element tree. A theme-like value that descendants should share may suit inherits: true; a value intended to apply only where it is set may suit inherits: false. These are design choices, not guarantees about what a particular page should use.

Check the registration details carefully. For non-universal syntax, initial-value is required and must be computationally independent. It may be omitted only when the syntax is universal (*). [S2] For instance, the <length> registration above uses 0px as its initial value. Registration guidance does not establish identical support in every browser, so check the browsers relevant to your project before relying on it.

Make a small page with a parent, two children, and one child that overrides the property. First test an unregistered property: set a value on the parent, use it on both children, then override it on just one child. Next, register a separate property with an explicit syntax, inheritance setting, and initial value; compare the child that has no declaration with the child that does.

Write down the expected value for each element before checking the rendered result. That separates three questions: what the parent declares, whether the child inherits, and what initial value applies. If behavior differs across your target browsers, investigate support for registration before making it a requirement. These examples illustrate inheritance rules; they do not establish browser-by-browser support.