CSS | list-style-type Property - GeeksforGeeks

09 Aug, 2019
The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’.
Syntax:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|
lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none|
inherit;

Property values:
disc:This is the default value. The marker is a filled circle.Syntax:list-style-type: disc;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: disc;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: disc;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
list-style-type: disc;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: disc;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: disc;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
circle:The marker is a hollow circle.Syntax:list-style-type: circle;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: circle;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: circle;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
list-style-type: circle;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: circle;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: circle;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
square:The marker is a square.Syntax:list-style-type: square;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: square;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: square;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
list-style-type: square;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: square;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: square;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
decimal:The marker is a decimal numbers, beginning with 1.Syntax:list-style-type: decimal;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: decimal;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: decimal;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
list-style-type: decimal;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: decimal;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: decimal;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
lower-roman:The marker is a lowercase roman numerals (i, ii, iii, iv, v, etc.).Syntax:list-style-type: lower-roman;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: lower-roman;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: lower-roman;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
Syntax:
list-style-type: lower-roman;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: lower-roman;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: lower-roman;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
upper-roman:The marker is a uppercase roman numerals (I, II, III, IV, V, etc.).Syntax:list-style-type: upper-roman;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: upper-roman;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: upper-roman;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
Syntax:
list-style-type: upper-roman;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: upper-roman;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: upper-roman;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
lower-greek:The marker is a lowercase classical Greek alpha, beta, gamma, ... (?, ?, ?, ...).Syntax:list-style-type: lower-greek;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: lower-greek;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: lower-greek;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
Syntax:
list-style-type: lower-greek;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: lower-greek;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: lower-greek;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
lower-latin:The marker is a lowercase ascii letters (a, b, c, ... z).Syntax:list-style-type: lower-latin;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: lower-latin;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: lower-latin;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
Syntax:
list-style-type: lower-latin;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: lower-latin;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: lower-latin;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
upper-latin:The marker is a uppercase ascii letters (A, B, C, ... Z).Syntax:list-style-type: upper-latin;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: upper-latin;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: upper-latin;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
Syntax:
list-style-type: upper-latin;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: upper-latin;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: upper-latin;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
none:No marker is shown in this mode.Syntax:list-style-type: none;Example:<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: none;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: none;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>Output:
list-style-type: none;
Example:
<!DOCTYPE html><html>    <head>        <title>CSS list-style-type Property</title>        <style>        .geek1 {          list-style-type: none;        }        </style>    </head>    <body>    <h1 style = "text-align: center; color: green">        list-style-type: none;    </h1>    <p>Sorting Algorithms</p>    <ul class="geek1">      <li>Bubble Sort </li>      <li>Merge Sort</li>      <li>Insertion Sort</li>    </ul>          </body></html>
Output:
Note: lower-alpha and upper-alpha are same as lower-latin and upper-latin respectively.Supported Browsers: The browser supported by list-style-type property are listed below:
Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 7.0
Apple Safari 1.0
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?