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
Previous
CSS | text-justify Property
Next

CSS | letter-spacing Property
Recommended Articles
Page :
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-inline-start-style Property
26, Mar 20
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | transform-origin Property
24, Jul 19
How to use text overflow property in CSS ?
21, Apr 21
How to disable resizable property of textarea using CSS?
13, Nov 18
How content property is used with :after selector in CSS ?
15, Apr 21
CSS | hanging-punctuation Property
21, Jan 19
CSS font-family Property
24, Dec 18
CSS clip Property
27, Dec 18
CSS font-style Property
27, Dec 18
CSS text-decoration Property
28, Dec 18
CSS object-fit Property
31, Dec 18
CSS | line-height Property
31, Dec 18
CSS list-style Property
31, Dec 18
CSS border-style Property
31, Dec 18
CSS border-color Property
02, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Vishal Chaudhary 2
@Vishal Chaudhary 2
Vote for difficulty





Improved By :
Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!