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



The list-style CSS property is a shorthand property used to set all the properties related to list markers (the bullet points or numbers that appear next to each list item) in one declaration. The list-style shorthand property includes the following sub-properties: list-style-type, list-style-position, and list-style-image.


Using the shorthand property:

ul {
  list-style: square inside;

Setting all the properties individually:

ul {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: url('bullet.png');

Using the none value:

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


<list-style-type>The marker style
<list-style-position>The position of the marker
<list-style-image>The image used for the marker

Best Practices

  • Use the shorthand property to simplify your code and make it more readable.
  • 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