CSS list-style Property

Description

The list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image, and list-style-position at the same place in the style sheet.

Initial value

See individual properties

Applies to

List item elements

Inherited

Yes

Media

Visual

Computed value

See individual properties

Animatable

No

CSS Version

CSS1, CSS2, CSS3

JavaScript syntax

object.style.listStyle

Syntax

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

Values

• <list-style-type>See list-style-type CSS property for values.
• <list-style-position>See list-style-position CSS property for values.
• <list-style-image>See list-style-image CSS property for values.
• inherit

Example

<ul class="test"> 

   <li>List Element</li> 

   <li>List Element</li>

   <li>List Element</li>

</ul> 

<ul class="test2"> 

   <li>List Element</li>

   <li>List Element</li>

   <li>List Element</li>

</ul> 

.test {
   list-style: square outside; 
}
.test2 {
   list-style: circle inside;
}

Browser Support

Desktop
4	12	1	1	7	1
Tablets / Mobile
1	18	4	10.1	1	Yes

Last updated by CSSPortal on: 3rd November 2019