Open In App
Related Articles

CSS list-style-type Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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. 
  • circle: The marker is a hollow circle. 
  • square: The marker is a square. 
  • decimal: The marker is a decimal number, beginning with 1. 
  • lower-roman: The marker is a lowercase Roman numeral (i, ii, iii, iv, v, etc.). 
  • upper-roman: The marker is uppercase Roman numerals (I, II, III, IV, V, etc.). 
  • lower-greek: The marker is a lowercase classical Greek alpha, beta, gamma, … (??, ?…). 
  • upper-Latin: The marker is an uppercase ASCII letter (A, B, C, … Z). 
  • lower-Latin: The marker is a lowercase ASCII letter (a, b, c, … z). 
  • none: No marker is shown in this mode. 

Example: In this example, we are using list-style-type: disc;  property.

html

<!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: disc

Example: In this example, we are using list-style-type: circle;  property.

html

<!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: circle

Example: In this example, we are using list-style-type: square;  property.

html

<!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: 

square

Example: In this example, we are using list-style-type: decimal; property.

html

<!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: 

decimal

Example: In this example, we are using list-style-type: lower-roman; property.

html

<!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: 

lower-roman

Example: In this example, we are using list-style-type: upper-roman; property.

html

<!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: upper-roman

Example: In this example, we are using list-style-type: lower-greek; property.

html

<!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-greek

Example:  In this example, we are using list-style-type: lower-latin; property.

html

<!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: lower-latin

Example: In this example, we are using list-style-type: upper-latin; property.

html

<!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: 

upper-latin

Example: In this example, we are using list-style-type: none; property.

html

<!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: none

Note: lower-alpha and upper-alpha are the 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
  • Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0


Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads