list-style

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

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: revert;
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

In a notable exception, Safari will not recognize an unordered list as a list in the accessibility tree if has a list-style value of none.

The most straightforward way to address this is to add an explicit role="list" to the <ul> element in the markup. This will restore the list semantics without affecting the design.

CSS-only workarounds are also available for those who do not have access to the markup. One is to add a zero-width space as pseudo-content before each list item:

ul {
  list-style: none;
}

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

A second approach is to apply a url value to the list-style property:

nav ol, nav ul {
  list-style: none;
}

/* becomes */

nav ol, nav ul {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don’t result in unexpected behaviors that may negatively impact users’ experiences.

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`: `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
CSS Lists Module Level 3 (CSS Lists 3) # list-style-property

Browser compatibility

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