W3cubDocs

/CSS

list-style

The list-style CSS property is a shorthand for setting the individual values that define how a list is displayed: list-style-type, list-style-image, and list-style-position.

/* 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;
Initial value as each of the properties of the shorthand:
Applies to list items
Inherited yes
Media visual
Computed value as each of the properties of the shorthand:
Animation type discrete
Canonical order order of appearance in the formal grammar of the values

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

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

Specifications

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1 4 7 1
symbols No ? 35 No No No
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 1 Yes 12 4 6 6 1
symbols No No ? 35 No No No

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style