CSS list-style Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The list-style property is a shorthand that lets you control how list item markers are presented without setting each longhand individually. It bundles the marker type, any image used for the marker, and the marker’s placement relative to the list item. Using the shorthand is a convenient way to apply a cohesive marker style across a list while still allowing the underlying longhand properties — list-style-type, list-style-image, and list-style-position — to be adjusted separately when finer control is needed.

Visually, changes made by list-style affect both the marker glyph (bullet, number, or custom image) and how that glyph participates in layout. Marker placement can make markers sit inside the list item box or outside the principal content flow; this positioning interacts with box model properties such as padding-left and with the element’s formatting context (for example, its display type). Because markers are rendered alongside list item content, adjusting the shorthand can change text alignment, indentation, and wrapping behavior without altering the underlying DOM structure.

In practical use, the shorthand simplifies authoring and resetting list appearance: you can clear markers, switch between textual and image markers, or move markers inside the content with a single declaration rather than three. For accessibility and robustness, it’s important to consider fallbacks — image markers should have sensible non-image fallbacks — and to remember that more targeted styling (for example, per-item customization or styling the marker itself) can be achieved with the individual longhand properties or with the ::marker pseudo-element when finer styling is required.

Definition

Initial value: See individual properties
Applies to: List item elements
Inherited: Yes
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.listStyle

Interactive Demo

list-style: square;

list-style: inside;

list-style: url('images/tick.png');

list-style: georgian inside url('images/tick.png');

list-style: lower-roman outside url('images/non-existent.svg');

list-style: none;

Australia
New Zealand
United States
United Kingdom
India

Syntax

list-style: <list-style-type> || <list-style-position> || <list-style-image>

Values

<list-style-type>See list-style-type CSS property for values.
<list-style-position>See list-style-position CSS property for values.
<list-style-image>See list-style-image CSS property for values.
inherit

Example

HTML

<div class='example'>

  <h2>List-style examples</h2>



  <ul class='default'>

    <li>Default disc</li>

    <li>Item two</li>

    <li>Item three</li>

  </ul>



  <ul class='square'>

    <li>Square bullets</li>

    <li>Item two</li>

    <li>Item three</li>

  </ul>



  <ul class='custom-image'>

    <li>Image bullet</li>

    <li>Item two</li>

    <li>Item three</li>

  </ul>



  <ol class='inside'>

    <li>Inside positioned numbers</li>

    <li>Item two</li>

    <li>Item three</li>

  </ol>



  <p class='shorthand'>Shorthand example (circle)</p>

  <ul class='shorthand-list'>

    <li>Circle via shorthand</li>

    <li>Item two</li>

    <li>Item three</li>

  </ul>

</div>

CSS

/* Basic layout */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f7f7f7;
  color: #333;
}

.example {
  max-width: 640px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 12px;
}

/* Default list */
ul.default {
  list-style-type: disc;
  margin: 0 0 20px 20px;
}

/* Square bullets */
ul.square {
  list-style-type: square;
  margin: 0 0 20px 20px;
}

/* Custom image as bullet */
ul.custom-image {
  list-style-image: url('data:image/svg+xml;utf8,');
  list-style-position: outside;
  margin: 0 0 20px 40px;
}

/* Inside position for ordered list */
ol.inside {
  list-style-type: decimal;
  list-style-position: inside;
  background: #fff;
  padding: 10px;
  margin: 0 0 20px 0;
}

/* Shorthand: list-style:   ; here using circle */
ul.shorthand-list {
  list-style: circle inside;
  margin: 0 0 20px 0;
}

/* Small helper for shorthand text */
p.shorthand {
  margin: 16px 0 8px 0;
  font-weight: bold;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS list-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.