CSS list-style-type attribute

Definition and Usage

The list-style-type property sets the type of marker for list items.

See Also:

CSS Tutorial:CSS Lists

CSS Reference Manual:CSS list-style attribute

HTML DOM Reference Manual:listStyleType Property

Example

Set different list styles:

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

Try It Yourself

(More examples can be found at the bottom of the page).

CSS Syntax

list-style-type: value;

Attribute Value

CSS2 Values:

Value Description
none No marker.
disc Default. The marker is a solid circle.
circle The marker is a hollow circle.
square The marker is a solid square.
decimal The marker is a number.
decimal-leading-zero Numeric markers starting with 0 (01, 02, 03, and so on).
lower-roman Lower Roman numerals (i, ii, iii, iv, v, and so on).
upper-roman Upper Roman numerals (I, II, III, IV, V, and so on).
lower-alpha The marker is lower-alpha (a, b, c, d, e, and so on).
upper-alpha Uppercase English letters The marker is upper-alpha (A, B, C, D, E, etc.)
lower-greek Lowercase Greek letters (alpha, beta, gamma, etc.)
lower-latin Lowercase Latin letters (a, b, c, d, e, etc.)
upper-latin Uppercase Latin letters (A, B, C, D, E, etc.)
hebrew Traditional Hebrew numbering style
armenian Traditional Armenian numbering style
georgian Traditional Georgian numbering style (an, ban, gan, etc.)
cjk-ideographic Simple ideographic numbers
hiragana The markers are: a, i, u, e, o, ka, ki, etc. (Japanese katakana)
katakana The markers are: A, I, U, E, O, KA, KI, etc. (Japanese katakana)
hiragana-iroha The markers are: i, ro, ha, ni, ho, he, to, etc. (Japanese katakana)
katakana-iroha The markers are: I, RO, HA, NI, HO, HE, TO, etc. (Japanese katakana)

CSS2.1 values:

disc | circle | square | decimal | decimal-leading-zero | 
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | 
armenian | georgian | none | inherit

Technical details

Default value: disc
Inheritance: yes
Version: CSS1
JavaScript syntax: object.style.listStyleType="square"

More examples

Different types of list markers in unordered lists
This example demonstrates different types of list item markers in CSS.
Different types of list item markers in ordered lists
This example demonstrates different types of list item markers in CSS.
All list style types
This example demonstrates all different types of list item markers in CSS.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5