CSS list-style Property

Description

The list-style CSS property is used to control the appearance of list items in HTML documents. It allows you to specify the style, image, and position of list item markers, such as bullets for unordered lists or numbers for ordered lists. The list-style property can take three values: list-style-type, which defines the marker type (e.g., disc, circle, decimal); list-style-image, which allows you to use custom images as markers; and list-style-position, which determines whether the marker appears inside or outside the content box of the list item. By using the list-style property, you can customize the visual presentation of lists to better match your design preferences and the overall look of your web page. Individual properties are: list-style-type, list-style-image, and list-style-position.

Initial value

See individual properties

Applies to

List item elements

Inherited

Yes

Computed value

See individual properties

Animatable

No

JavaScript syntax

object.style.listStyle

Interactive Demo

list-style: square;

list-style: inside;

list-style: url('images/tick.png');

list-style: georgian inside url('images/tick.png');

list-style: lower-roman outside url('images/non-existent.svg');

list-style: none;

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

The following table will show you the current browser support for the CSS list-style property.

Desktop
12	1	1	7	1

Tablets / Mobile
18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024