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” |
