Skip to content
Related Articles

Related Articles

CSS | list-style-type Property

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jun, 2022

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: 

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

  • circle:The marker is a hollow circle. 

Syntax: 

list-style-type: circle;

Example: 

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

  • square:The marker is a square. 

Syntax: 

list-style-type: square;

Example: 

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

  • decimal:The marker is a decimal numbers, beginning with 1. 

Syntax: 

list-style-type: decimal;

Example: 

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

  • lower-roman:The marker is a lowercase roman numerals (i, ii, iii, iv, v, etc.). 

Syntax: 

list-style-type: lower-roman;

Example: 

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

  • upper-roman:The marker is a uppercase roman numerals (I, II, III, IV, V, etc.). 

Syntax: 

list-style-type: upper-roman;

Example: 

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

  • lower-greek:The marker is a lowercase classical Greek alpha, beta, gamma, … (?, ?, ?, …). 

Syntax: 

list-style-type: lower-greek;

Example: 

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

  • lower-latin:The marker is a lowercase ascii letters (a, b, c, … z). 

Syntax: 

list-style-type: lower-latin;

Example: 

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

  • upper-latin:The marker is a uppercase ascii letters (A, B, C, … Z). 

Syntax: 

list-style-type: upper-latin;

Example: 

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

  • none:No marker is shown in this mode. 

Syntax: 

list-style-type: none;

Example: 

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 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
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!