CSS list-style Property

CSS list-style property is a shorthand property for setting all the list related properties in one statement.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: disc outside none
Applies to: List items
Inherited: Yes
Version: CSS1
JavaScript Syntax: object.style.listStyle = "disc outside"

Syntax

Here is a syntax for the CSS list-style property

list-style: list-style-type list-style-position list-style-image | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
list-style-type Specifies marker style of a list item element, It can be one of the following:
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-alpha
lower-latin
upper-alpha
upper-latin
armenian
georgian
none
list-style-position Specifies the position of the list-item marker, It can be one of the following:
inside
outside
list-style-image Specifies the image to be used as a list-item marker, It can be set url location of the image resource
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets list-style property.

.one {
  list-style: upper-latin inside;
}
.two {
  list-style: upper-latin outside;
}
.three {
  list-style: square inside;
}
.four {
  list-style: square outside;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 7+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.