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 accepts the following set of values:
disc | The marker is a disc. This is the default value. |
circle | The marker is a circle. |
square | The marker is a square. |
armenian | The marker represents Armenian numbering system. |
cjk-ideographic | The marker represents ideographic numbers. |
decimal | The marker represents decimal numbers(1, 2, 3). |
decimal-leading-zero | The marker represents decimal numbers with leading zero(01, 02,03). |
georgian | The marker represents Georgian numbering system. |
hebrew | The marker represents the Hebrew numbering system. |
hiragana | The marker represents the Hiragana numbering system. |
hiragana-iroha | The marker represents the Hiragana iroha numbering system. |
katakana | The marker represents the Katakana numbering system. |
katakana-iroha | The marker represents the Katakana iroha numbering system. |
lower-alpha | The marker represents lower-alpha numbering(a, b, c, d, etc.) |
lower-greek | The marker represents lower Greek numbering(α, β, γ, etc) |
lower-latin | The marker represents lower Latin numbering(a, b, c, etc.) |
lower-roman | The marker represents lower Roman numbering(i, ii, iii, etc) |
upper-alpha | The marker represents upper-alpha numbering(A, B, C, etc.) |
upper-greek | The marker represents upper Greek numbering. |
upper-latin | The marker represents upper Latin numbering(A, B, C, etc) |
upper-roman | The marker is upper Roman numbering(I, II, III, etc.) |
none | No marker is shown. |
initial | Sets the list-style-type property to its default value(disc). |
inherit | Inherits the list-style-type property from the parent element. |
General Info
Default Value | disc |
Inherited | Yes |
JavaScript Usage | element.style.listStyleType = “circle” |