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:


  list-style-type: circle;
  list-style-type: square;
  list-style-type: lower-alpha;
  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 accepts the following set of 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
JavaScript Usageelement.style.listStyleType = “circle”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment