Web/CSS/list-style

The list-style CSS shorthand property allows you set all the list style properties at once.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Note: This property is applied to list items, i.e., elements with display: list-item; . By default this includes <li> elements. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

list-style-type: See list-style-type.
list-style-image: See list-style-image.
list-style-position: See list-style-position.
none: No list style is used.

Accessibility concerns

Safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. To address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

Formal definition

Initial value	as each of the properties of the shorthand: `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
Applies to	list items
Inherited	yes
Computed value	as each of the properties of the shorthand: `list-style-image`: `none` or the image with its URI made absolute `list-style-position`: as specified `list-style-type`: as specified
Animation type	discrete

Formal syntax

<'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Examples

Setting list style type and position

HTML

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Result

Specifications

Specification	Status	Comment
CSS Lists Module Level 3The definition of 'list-style' in that specification.	Working Draft	No change.
CSS Level 2 (Revision 1)The definition of 'list-style' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`list-style`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
`symbols`	Chrome No support No	Edge No support No	Firefox Full support 35	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 35	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support