Customizing Unordered Lists

I occasionally see people on lists and forums asking how they can customize bulleted lists. This is about all you need to know:

.disc {list-style:disc}

  • this is
  • a disc

.square{list-style:square}

  • this is
  • a square

.circle {list-style:circle}

  • this is
  • a circle

.image {list-style-image:url(http://www.markme.com/cantrell/images/mm_bullet.gif)}

  • these are
  • custom bullets

5 Responses to Customizing Unordered Lists

  1. E says:

    list-style-image places the image differently on different browsers. It’s better to use non-repeating background image:li {list-style: none;background: url(img.gif) no-repeat left center;}

  2. And don’t forget the type attribute of the tag itself.Disco Duck

  3. Gregory Cerveny says:

    Where are my posters?-Greg