list-style

list-style is the shorthand for a list item’s marker type, marker image, and marker position. Set it on a list container to inherit the choices into its list items.

Choose a square marker outside the text

The marker shape changes, while the list remains an unordered list in HTML.

<ul>
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ul>

ul {
  list-style: square outside;
  padding-inline-start: 1.75rem;
}
li {
  margin-block: 0.5rem;
}

Number real instructions

Decimal numbering belongs to an ordered list because the sequence matters. Inside puts the marker at the start of the content flow.

<ol>
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ol>

ol {
  list-style: decimal inside;
  padding: 0;
  max-width: 28ch;
}
li {
  margin-block: 0.75rem;
}

Defaults and resets

The inherited shorthand sets list-style-type, list-style-image, and list-style-position. Omitted values reset to disc, none, and outside. Browser styles normally give ol decimal markers, so a shorthand that omits the type can unexpectedly reset it to disc. List-style:none sets no marker type or image; position still resets to outside.

Common mistakes

Markers appear on display:list-item boxes; Grid/Flex display on li can remove that marker box. Nested lists have their own browser type rules, so inheritance does not guarantee identical nested markers. Removing markers can affect list exposure in some Safari/assistive-technology combinations; when a markerless list is still meant as a list, an explicit role=”list” can preserve that intent. Avoid adding ARIA when ordinary marked lists already work.

Learn list-style-type, list-style-position, and ol.

Sources and browser support

MDN: list-style describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.