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
| Value | Description |
|---|---|
| disc | A filled circle (default) |
| circle | An empty circle |
| square | An empty square |
| decimal | A decimal number |
| decimal-leading-zero | A decimal number with a leading zero |
| lower-roman | Lowercase Roman numerals |
| upper-roman | Uppercase Roman numerals |
| lower-greek | Lowercase Greek letters |
| lower-alpha | Lowercase letters |
| upper-alpha | Uppercase letters |
| none | No 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |