CSS list-style-type Property

CSS list-style-type property is used to set the type of marker for list items. For example, list style type can be ‘circle’, ‘disc’, ‘square’, etc.

See the example below:

Example:

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

CSS Syntax

The list-style-type property has the following syntax:

list-style-type: type|none|initial|inherit;


Property Values:

The list-style-type property accept the following values:

discThe marker is a disc. This is the default value.
circleThe marker is a circle.
squareThe marker is a square.
armenianThe marker represents Armenian numbering system.
cjk-ideographicThe marker represents ideographic numbers.
decimalThe marker represents decimal numbers(1, 2, 3).
decimal-leading-zeroThe marker represents decimal numbers with leading zero(01, 02,03).
georgianThe marker represents Georgian numbering system.
hebrewThe marker represents the Hebrew numbering system.
hiraganaThe marker represents the Hiragana numbering system.
hiragana-irohaThe marker represents the Hiragana iroha numbering system.
katakanaThe marker represents the Katakana numbering system.
katakana-irohaThe marker represents the Katakana iroha numbering system.
lower-alphaThe marker represents lower-alpha numbering(a, b, c, d, etc.)
lower-greekThe marker represents lower Greek numbering(α, β, γ, etc)
lower-latinThe marker represents lower Latin numbering(a, b, c, etc.)
lower-romanThe marker represents lower Roman numbering(i, ii, iii, etc)
upper-alphaThe marker represents upper-alpha numbering(A, B, C, etc.)
upper-greekThe marker represents upper Greek numbering.
upper-latinThe marker represents upper Latin numbering(A, B, C, etc)
upper-romanThe marker is upper Roman numbering(I, II, III, etc.)
noneNo marker is shown.
initialSets the list-style-type property to its default value(disc).
inheritInherits the list-style-type property from the parent element.

General Info

Default Valuedisc
InheritedYes
JavaScript Usageelement.style.listStyleType = “circle”