list-style

The list-style property is a shorthand property for setting list-style-type, list-style-image and list-style-position.

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

Syntax

/* type */
list-style: square;

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

/* position */
list-style: inside;

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

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

list-style: none;

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

Values

Accepts 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 if the image is unavailable.

<'list-style-type'>

See list-style-type

<'list-style-image'>

See list-style-image

<'list-style-position'>

See list-style-position

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

Browser compatibility

See also

• list-style-type, list-style-image, list-style-position