The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

Try it

The color of the marker will be the same as the computed color of the element it applies to.

Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.


/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/* <string> value */
list-style-type: '-';

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* Keyword value */
list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

The list-style-type property may be defined as any one of:

  • a <custom-ident> value
  • a symbols() value
  • a <string> value
  • the keyword none.

Note that:

  • Some types require a suitable font installed to display as expected.
  • The cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons.



A identifier matching the value of a @counter-style or one of the predefined styles:


Defines an anonymous style of the list.


The specified string will be used as the item's marker.


No item marker is shown.


A filled circle (default value).


A hollow circle.


A filled square.


Decimal numbers, beginning with 1.

cjk-decimal Experimental

Han decimal numbers.


Decimal numbers, padded by initial zeros.


Lowercase roman numerals.


Uppercase roman numerals.


Lowercase classical Greek.

lower-alpha, lower-latin

Lowercase ASCII letters.

upper-alpha, upper-latin

Uppercase ASCII letters.

arabic-indic, -moz-arabic-indic

Arabic-Indic numbers.


Traditional Armenian numbering.

bengali, -moz-bengali

Bengali numbering.


Cambodian/Khmer numbering.

cjk-earthly-branch, -moz-cjk-earthly-branch

Han "Earthly Branch" ordinals.

cjk-heavenly-stem, -moz-cjk-heavenly-stem

Han "Heavenly Stem" ordinals.

cjk-ideographic Experimental

Identical to trad-chinese-informal.

devanagari, -moz-devanagari

Devanagari numbering.

ethiopic-numeric Experimental

Ethiopic numbering.


Traditional Georgian numbering.

gujarati, -moz-gujarati

Gujarati numbering.

gurmukhi, -moz-gurmukhi

Gurmukhi numbering.

hebrew Experimental

Traditional Hebrew numbering

hiragana Experimental

Dictionary-order hiragana lettering.

hiragana-iroha Experimental

Iroha-order hiragana lettering

japanese-formal Experimental

Japanese formal numbering to be used in legal or financial documents. The kanjis are designed so that they can't be modified to look like another correct one.

japanese-informal Experimental

Japanese informal numbering.

kannada, -moz-kannada

Kannada numbering.

katakana Experimental

Dictionary-order katakana lettering

katakana-iroha Experimental

Iroha-order katakana lettering

korean-hangul-formal Experimental

Korean hangul numbering.

korean-hanja-formal Experimental

Formal Korean Han numbering.

korean-hanja-informal Experimental

Korean hanja numbering.

lao, -moz-lao

Laotian numbering.

lower-armenian Experimental *

Lowercase Armenian numbering.

malayalam, -moz-malayalam

Malayalam numbering.

mongolian Experimental

Mongolian numbering.

myanmar, -moz-myanmar

Myanmar (Burmese) numbering.

oriya, -moz-oriya

Oriya numbering.

persian Experimental , -moz-persian

Persian numbering

simp-chinese-formal Experimental

Simplified Chinese formal numbering.

simp-chinese-informal Experimental

Simplified Chinese informal numbering.

tamil Experimental , -moz-tamil

Tamil numbering.

telugu, -moz-telugu

Telugu numbering.

thai, -moz-thai

Thai numbering.

tibetan Experimental *

Tibetan numbering.

trad-chinese-formal Experimental

Traditional Chinese formal numbering.

trad-chinese-informal Experimental

Traditional Chinese informal numbering.

upper-armenian Experimental *

Traditional uppercase Armenian numbering.

disclosure-open Experimental

Symbol indicating that a disclosure widget such as <details> is opened.

disclosure-closed Experimental

Symbol indicating that a disclosure widget, like <details> is closed.

Non-standard extensions

A few more predefined types are provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.

  • -moz-ethiopic-halehame
  • -moz-ethiopic-halehame-am
  • ethiopic-halehame-ti-er, -moz-ethiopic-halehame-ti-er
  • ethiopic-halehame-ti-et, -moz-ethiopic-halehame-ti-et
  • hangul, -moz-hangul
  • hangul-consonant, -moz-hangul-consonant
  • urdu, -moz-urdu

Accessibility concerns

The VoiceOver screen reader has an issue where unordered lists with a list-style-type value of none applied to them will not be announced as a list. To address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

ul {
  list-style: none;

ul li::before {
  content: "\200B";

Formal definition

Initial valuedisc
Applies tolist items
Computed valueas specified
Animation typediscrete

Formal syntax

<counter-style> | <string> | none

<counter-style> = <counter-style-name> | symbols()

<counter-style-name> = <custom-ident>


Setting list item markers


List 1
<ol class="normal">
  <li>What's up?</li>

List 2
<ol class="shortcut">


ol.normal {
  list-style-type: upper-alpha;

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;


All list style types



<h2>Choose a list style type:</h2>

<div class="container">

  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc">disc

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle">circle

  <label for="square">
    <input type="radio" id="square" name="type" value="square">square

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal">decimal

  <label for="cjk-decimal">
    <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal

  <label for="decimal-leading-zero">
    <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero

  <label for="lower-roman">
    <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman

  <label for="upper-roman">
    <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman

  <label for="lower-greek">
    <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek

  <label for="lower-alpha">
    <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin

  <label for="upper-alpha">
    <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin

  <label for="arabic-indic">
    <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian">armenian

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali">bengali

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian">cambodian

  <label for="cjk-earthly-branch">
    <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch

  <label for="cjk-heavenly-stem">
    <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem

  <label for="cjk-ideographic">
    <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic

  <label for="devanagari">
    <input type="radio" id="devanagari" name="type" value="devanagari">devanagari

  <label for="ethiopic-numeric">
    <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian">georgian

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati">gujarati

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew">hebrew

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana">hiragana

  <label for="hiragana-iroha">
    <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha

  <label for="japanese-formal">
    <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal

  <label for="japanese-informal">
    <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada">kannada

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana">katakana

  <label for="katakana-iroha">
    <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer">khmer

  <label for="korean-hangul-formal">
    <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal

  <label for="korean-hanja-formal">
    <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal

  <label for="korean-hanja-informal">
    <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao">lao

  <label for="lower-armenian">
    <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam">malayalam

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian">mongolian

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar">myanmar

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya">oriya

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian">persian

  <label for="simp-chinese-formal">
    <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal

  <label for="simp-chinese-informal">
    <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil">tamil

  <label for="telugu">
    <input type="radio" id="telugu" name="type" value="telugu">telugu

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai">thai

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan">tibetan

  <label for="trad-chinese-formal">
    <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal

  <label for="trad-chinese-informal">
    <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal

  <label for="upper-armenian">
    <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian

  <label for="disclosure-open">
    <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open

  <label for="disclosure-closed">
    <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed

  <label for="-moz-ethiopic-halehame">
    <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame

  <label for="-moz-ethiopic-halehame-am">
    <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am

  <label for="ethiopic-halehame-ti-er">
    <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er

  <label for="ethiopic-halehame-ti-et">
    <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul">hangul

  <label for="hangul-consonant">
    <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu">urdu

  <label for="-moz-ethiopic-halehame-ti-er">
    <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er

  <label for="-moz-ethiopic-halehame-ti-et">
    <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et

  <label for="-moz-hangul">
    <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul

  <label for="-moz-hangul-consonant">
    <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant

  <label for="-moz-urdu">
    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu



ol {
  font-size: 1.2rem;

.container {
  column-count: 3;

label {
  display: block;

input {
  margin: .4rem;


const container = document.querySelector(".container");
container.addEventListener("change", event => {
  const list = document.querySelector("ol");
  list.setAttribute("style", `list-style-type: ${}`);



CSS Lists and Counters Module Level 3
# text-markers
CSS Counter Styles Level 3
# extending-css2

Browser compatibility

BCD tables only load in the browser

See also