CSS list-style attribute

Definition and usage

The list-style shorthand property sets all list properties in a single declaration.

Description

This is a shorthand property that covers all other list style properties. Since it applies to all elements with display set to list-item, it can only be used for li elements in plain HTML and XHTML, although it can actually be applied to any element and inherited by list-item elements.

You can set the following properties in order:

You can omit one of the values, for example, "list-style:circle inside;" is also allowed. Unset properties will use their default values.

See also:

CSS Tutorial:CSS Lists

HTML DOM Reference Manual:listStyle property

Example

Set the image as the list item marker in the list:

ul
  {
  list-style:square inside url('/i/arrow.gif');
  }

Try it yourself

CSS syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Property value

Value Description
list-style-type Sets the type of the list item markers. See:list-style-type Possible values.
list-style-position Sets where the list item markers are placed. See:list-style-position Possible values.
list-style-image Use images to replace the list item markers. See:list-style-image Possible values.
inherit Specifies that the value of the list-style property should be inherited from the parent element.

Technical details

Default value: disc outside none
Inheritance: yes
Version: CSS1
JavaScript syntax: object.style.listStyle="decimal inside"

More examples

Define all list properties in a single declaration
This example demonstrates setting all list-related properties in a shorthand property.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0