W3cubDocs

list-style

The list-style CSS property is a shorthand to set list style properties list-style-type, list-style-image, and list-style-position.

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.

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.

Formal syntax

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

Examples

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

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";
}

Specifications

Specification	Status	Comment
CSS Lists Module Level 3 The 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.

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
Media	visual
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
Canonical order	order of appearance in the formal grammar of the values

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1	4	7	1
`symbols`	No	?	35	No	No	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	1	Yes	12	4	6	1	Yes
`symbols`	No	No	?	35	No	No	No