@counter-styleBaseline · Widely available

The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 18, 2023. Widely available since Mar 18, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–90Not supported

91+Supportedsince May 25, 2021

Current: 155

Edge

12–90Not supported

91+Supportedsince May 27, 2021

Current: 154

Firefox

1–32Not supported

33+Supportedsince Oct 14, 2014

Current: 157

Safari

1–16.6Not supported

17+Supportedsince Sep 18, 2023

Current: 27

MobileChrome Android

18–90Not supported

91+Supportedsince May 25, 2021

Current: 155

Firefox Android

4–32Not supported

33+Supportedsince Oct 14, 2014

Current: 157

Safari iOS

1–16.6Not supported

17+Supportedsince Sep 18, 2023

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: CSSCounterStyleRule.

Feature detection

JS · check before using

if ("CSSCounterStyleRule" in globalThis) {
  // CSSCounterStyleRule is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

drafts.csswg.org/css-counter-styles-3 ↗

Usage share

caniuse.com/css-at-counter-style ↗

Sub-features

Support for each part of the feature (23). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
CSSCounterStyleRule	91	91	33	17	91	33	17
CSSCounterStyleRule.additiveSymbols	91	91	33	17	91	33	17
CSSCounterStyleRule.fallback	91	91	33	17	91	33	17
CSSCounterStyleRule.name	91	91	33	17	91	33	17
CSSCounterStyleRule.negative	91	91	33	17	91	33	17
CSSCounterStyleRule.pad	91	91	33	17	91	33	17
CSSCounterStyleRule.prefix	91	91	33	17	91	33	17
CSSCounterStyleRule.range	91	91	33	17	91	33	17
CSSCounterStyleRule.speakAs	91	91	33	17	91	33	17
CSSCounterStyleRule.suffix	91	91	33	17	91	33	17
CSSCounterStyleRule.symbols	91	91	33	17	91	33	17
CSSCounterStyleRule.system	91	91	33	17	91	33	17
@counter-style	91	91	33	17	91	33	17
@counter-style.additive-symbols	91	91	33	17	91	33	17
@counter-style.fallback	91	91	33	17	91	33	17
@counter-style.negative	91	91	33	17	91	33	17
@counter-style.pad	91	91	33	17	91	33	17
@counter-style.prefix	91	91	33	17	91	33	17
@counter-style.range	91	91	33	17	91	33	17
@counter-style.speak-as	91	91	33	✕	91	33	✕

Show 3 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
@counter-style.suffix	91	91	33	17	91	33	17
@counter-style.symbols	✕	✕	✕	17	✕	✕	17
@counter-style.system	91	91	33	17	91	33	17