list-style

Avatar of Sara Cope
Sara Cope on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

ul {
  list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}

Here’s an example of the syntax:

ul {
  list-style: square outside none;
}

Which would be the same as the following longhand version:

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN has a more complete list. Non-keyword values were introduced in CSS3, and are starting to see some support, like:

ul {
  list-style-type: "→";
}

The following demo includes a group of unordered lists to demonstrate each keyword value:

The list-style-type property applies to all lists, and to any element that is set to display: list-item.

The color of the list marker will be whatever the computed color of the element is (set via the color property).

Values for list-style-position

The list-style-position property defines where to position the list marker, and it accepts one of two values: inside or outside. These are demonstrated below with the padding removed from the lists and a left red border added:

Values for list-style-image

The list-style-image property determines whether the list marker is set with an image, and accepts a value of “none” or a URL that points to the image:

ul {
  list-style-image: url(images/bullet.png);
}

More Demos

Browser support

IEEdgeFirefoxChromeSafariOpera
YesYesYesYesWorksWorks
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
YesYesYesYesWorks
Source: caniuse

Internet Explorer 6 and 7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image) on the list items.

More information