Tag list-style

📝 CSS list-style: Customizing Bullet Points with Style

Lists are everywhere on the web — navigation menus, feature breakdowns, steps, FAQs. While functional by default, the CSS list-style property lets you give those lists a custom look that matches your design perfectly.

Whether you’re changing bullet shapes, using custom images, or adjusting spacing, list-style provides flexible control in a single line.

🧾 What is list-style?

list-style is a shorthand property that combines:

  • list-style-type (bullet shape)
  • list-style-position (inside or outside the content box)
  • list-style-image (custom image bullets)

✅ Default Behavior

By default, most browsers render unordered lists (<ul>) with round bullets and ordered lists (<ol>) with numbers.

🧬 Syntax

selector {
  list-style: <list-style-type> <list-style-position> <list-style-image>;
}

All parts are optional — you can use just one or all three.

🎯 Example

ul.custom-list {
  list-style: square inside url('star.svg');
}

This:

  • uses a custom image (star.svg) as the bullet,
  • falls back to a square bullet if the image doesn’t load,
  • places the bullet inside the text block.

🧩 Shorthand Components

1. list-style-type

Defines the marker (bullet, number, etc.).

ValueDescription
discDefault solid circle
circleHollow circle
squareSolid square
decimalNumbers (1, 2, 3…)
lower-romani, ii, iii…
noneRemoves the bullet
ul {
  list-style-type: square;
}

2. list-style-position

Determines whether the marker is inside or outside the content box.

ValueDescription
outsideMarker is outside the text block (default)
insideMarker is part of the text block
ol {
  list-style-position: inside;
}

3. list-style-image

Lets you use a custom image instead of a bullet.

ul {
  list-style-image: url('checkmark.png');
}

You can also combine with list-style-type as a fallback.

🛠️ Tips & Best Practices

  • Set list-style: none; to remove bullets for custom layouts (e.g., navigation).
  • Always provide a list-style-type fallback when using images.
  • Use ::marker pseudo-element (modern CSS) for advanced custom bullet styles.
  • Use inside positioning for compact lists or when bullets need to align with text.
  • Be careful with image bullets — they can misalign on different screen sizes or with text resizing.

✅ Browser Support

The list-style shorthand is widely supported:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Internet Explorer 6+

However, support for list-style-image and ::marker customization varies across older versions.

🔚 Conclusion

The list-style shorthand is a simple yet powerful way to enhance or override default list appearances. Whether you’re designing sleek UI lists or elegant content blocks, it gives you the flexibility to style them consistently and creatively.