Widely availableSupported across all major browsers. Safe to use in production.
Typography Widely available

List style

The list-style shorthand CSS property and the list-style-image, list-style-position, and list-style-type longhand properties set the position and appearance of a list item's marker.

Typography

Overview

The list-style shorthand CSS property and the list-style-image, list-style-position, and list-style-type longhand properties set the position and appearance of a list item's marker.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
list-style
1
12
1
1
18
1
Other
css.properties.list-style-image

The list-style-image CSS property sets an image to be used as the list item marker.
1
12
1
1
18
1
CSS property
none
1
12
1
1
18
1
Other
css.properties.list-style-position

The list-style-position CSS property sets the position of the ::marker relative to a list item.
1
12
1
1
18
1
CSS property
inside
1
12
1
1
18
1
outside
1
12
1
1
18
1
Other
css.properties.list-style-type

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
1
12
1
1
18
1
CSS property
arabic-indic
6
79
33
5
18
4.2
armenian
1
12
1
1
18
1
bengali
6
79
33
5
18
4.2
cambodian
6
79
33
5
18
4.2
circle
1
12
1
1
18
1
cjk-decimal
91
91
28
15
91
15
cjk-earthly-branch
6
79
33
5
18
4.2
cjk-heavenly-stem
6
79
33
5
18
4.2
cjk-ideographic
1
79
1
5
18
4.2
decimal
1
12
1
1
18
1
decimal-leading-zero
1
12
1
1
18
1
devanagari
6
79
33
5
18
4.2
disc
1
12
1
1
18
1
disclosure-closed
89
89
33
15
89
15
disclosure-open
89
89
33
15
89
15
ethiopic-numeric
91
91
33
15
91
15
georgian
1
12
1
1
18
1
gujarati
6
79
33
5
18
4.2
gurmukhi
6
79
33
5
18
4.2
hebrew
1
12
1
1
18
1
hiragana
1
12
1
1
18
1
hiragana-iroha
1
12
1
1
18
1
japanese-formal
91
91
28
15
91
15
japanese-informal
91
91
28
15
91
15
kannada
6
79
33
5
18
4.2
katakana
1
12
1
1
18
1
katakana-iroha
1
12
1
1
18
1
khmer
6
79
33
5
18
4.2
korean-hangul-formal
45
79
28
15
45
15
korean-hanja-formal
45
79
28
15
45
15
korean-hanja-informal
45
79
28
15
45
15
lao
6
79
33
5
18
4.2
lower-alpha
1
12
1
1
18
1
lower-armenian
13
79
33
5.1
18
5
lower-greek
1
12
1
1
18
1
lower-latin
1
12
1
1
18
1
lower-roman
1
12
1
1
18
1
malayalam
6
79
33
5
18
4.2
mongolian
6
79
33
5
18
4.2
myanmar
6
79
33
5
18
4.2
none
1
12
1
1
18
1
oriya
6
79
33
5
18
4.2
persian
6
79
33
5
18
4.2
simp-chinese-formal
45
79
28
15
45
15
simp-chinese-informal
45
79
28
15
45
15
square
1
12
1
1
18
1
string

`<string>`
79
79
39
14.1
79
14.5
symbols

The symbols() CSS function enables defining counter styles inline, directly as a value of properties such as list-style, providing a less powerful but simpler alternative to the @counter-style method of defining a counter style.
35
tamil
91
91
33
15
91
15
telugu
6
79
33
5
18
4.2
thai
6
79
33
5
18
4.2
tibetan
6
79
33
5
18
4.2
trad-chinese-formal
45
79
28
15
45
15
trad-chinese-informal
45
79
28
15
45
15
upper-alpha
1
12
1
1
18
1
upper-armenian
13
79
33
5.1
18
5
upper-latin
1
12
1
1
18
1
upper-roman
1
12
1
1
18
1
inside
1
12
1
1
18
1
none
1
12
1
1
18
1
outside
1
12
1
1
18
1
symbols

The symbols() CSS function enables defining counter styles inline, directly as a value of properties such as list-style, providing a less powerful but simpler alternative to the @counter-style method of defining a counter style.
35
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before Firefox 86, this property did not accept an `<image>` type, and required the URL of an image.
Notes 1 item(s)
Implementation note
  • In Safari, if a block element is the first child of a list element declared as `list-style-position: inside`, then the marker box is placed on the same line as the block element.
Notes 1 item(s)
Implementation note
  • In Safari on iOS, if a block element is the first child of a list element declared as `list-style-position: inside`, then the marker box is placed on the same line as the block element.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 2 item(s)
Implementation note
  • Before Firefox 38, Firefox added a dot as suffix of the number for `ethiopic-numeric` (for example, ፫. instead of ፫). The specification later defined the absence of a suffix, which Firefox 38 followed.
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (1)

Syntax

CSS 
ul {
  list-style: square inside;
}
ol {
  list-style-type: upper-roman;
}

Live demo

squarem-ka-(inside)

CSS squarem-ka-(inside) demo.

PreviewFullscreen

ro-mnumbercharacter

CSS ro-mnumbercharacter demo.

PreviewFullscreen

customemoji

CSS customemoji demo.

PreviewFullscreen

Use cases

  • Using List style

    The list-style shorthand CSS property and the list-style-image, list-style-position, and list-style-type longhand properties set the position and appearance of a list item's marker.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features