1. css
  2. /properties
  3. /list-style-type

list-style-type

Definition

The list-style-type CSS property is used to specify the marker style of a list item. It is used in conjunction with the list-style shorthand property, which allows you to set all the list styles at once.

Examples

Using the default marker style:

ul {
  list-style-type: disc;
}

Using a different marker style:

ol {
  list-style-type: upper-roman;
}

Removing the marker style altogether:

ul.no-marker {
  list-style-type: none;
}

Values

ValueDescription
discA filled circle (default)
circleAn empty circle
squareAn empty square
decimalA decimal number
decimal-leading-zeroA decimal number with a leading zero
lower-romanLowercase Roman numerals
upper-romanUppercase Roman numerals
lower-greekLowercase Greek letters
lower-alphaLowercase letters
upper-alphaUppercase letters
noneNo marker

Best Practices

  • Use list-style: none to remove the default marker style from a list.
  • Choose a marker style that is appropriate for the content and style of your website.
  • Use list-style-position: inside to place the marker inside the list item, rather than outside.
  • Avoid using custom marker styles that are difficult to read or distinguish from one another.
  • Keep in mind that some marker styles may not be supported in all browsers, so test your list styles thoroughly.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes