CSS list-style-type Property

February 10, 2021 12:37 pm IST

You are Here:

CSS list-style-type Property

CSS list-style-type property sets the marker of a list item element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> ul{ font-size: 18px; line-height: 1.8; } #point{ list-style-type: disc; } #point1{ list-style-type: circle; } </style> </head> <body> <h1>CSS list-style-type Property</h1> <h2>list-style-type: disc;</h2> <ul id="point"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> <h2>list-style-type: circle;</h2> <ul id="point1"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> </body> </html>

Run

Syntax

Using CSS

element{ list-style-type: square; }

Using Javascript

object.style.listStyleType="square";

Animatable

No, list-style-type property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS list-style-type property is disc.

Property Value

The following table provides a list of values for CSS list-style-type property.

Value	Explanation
disc circle square none decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upper-latin arabic-indic armenian bengali cjk-earthly-branch cjk-heavenly-stem devanagari georgian gujarati gurmukhi kannada khmer lao malayalam myanmar oriya telugu thai	The list of values that can be used with CSS `list-style-type` property.

All in One

In the following example, we will demonstrate all values of CSS list-style-type property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> ul{ font-size: 18px; line-height: 1.8; } #point4{ list-style-type: decimal; } #point5{ list-style-type: decimal-leading-zero; } </style> </head> <body> <h1>CSS list-style-type Property</h1> <h2>list-style-type: decimal;</h2> <ul id="point4"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> <h2>list-style-type: decimal-leading-zero;</h2> <ul id="point5"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS list-style-type property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> ul{ font-size: 18px; line-height: 1.8; } </style> </head> <body> <h1>CSS list-style-type Property</h1> <ul id="point"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("ul")[0]; function myFunction(){ x.style.listStyleType = "circle"; } </script> </body> </html>

Run