Setting the CSS list-style-type property

The list-style-type property CSS enables to set the bullet types or numbering styles for the associated ordered or unordered list elements of HTML. There is a set of predefined values which can be used to specify the value for this CSS property. Following are the names of predefined list style types that can be used for specifying the bullet or numbering type of the list items in ordered or unordered list element:

• armenian
• circle
• cjk-ideographic
• decimal
• decimal-leading-zero
• disc
• georgian
• hebrew
• hiragana
• hiragana-iroha
• katakana
• katakana-iroha
• lower-alpha
• lower-greek
• lower-latin
• lower-roman
• none
• square
• upper-alpha
• upper-latin
• upper-roman

Syntax

list-style-type: [ one of the list style type values];

The default list style type value for HTML <ul> element is "disc" and "decimal" for HTML <ol> element.

Examples

list-style-type: square;

It will display a square shaped bullet for each list item of the unordered list.

list-style-type: upper-roman;

It will display the roman numbers in uppercase as a bullet for each item of the ordered list.

Continue to the next tutorial: Displaying bullet icon using CSS list-style-image property to learn how to display an image in place of default bullet types for unordered list elements.