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: `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

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

Specification	Status	Comment
CSS Lists and Counters 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.

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4.0	7.0	1.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0