The size of a bullet is defined by the browser, font, and font size. Although you can sometimes increase the size of the font to increase the bullet size, a better solution is to use an image as a bullet.

To change a bullet to an image, use CSS on your page similar to the following example.

In the CSS code above, we are first setting the

    tags to show no list style, which removes the bullet from the unordered list. Next, we set “ul li” to only change the appearance of
  • tags that are contained in the
      tags. In the first line of this section is the background, which points to the bullet image we are using in the example. All other lines are giving the padding and margin around the bullet.

      After the code is created, any HTML unordered list uses the bullet picture as the bullet.

      You can also create a CSS class if you want to change a single bullet or a select group of bullets in a list.

      Example HTML code

      • First bullet example
      • Second bullet example

      Results of HTML code using the example CSS

      • First bullet example
      • Second bullet example
      • How to create a bullet and number list in HTML.
      • How to create a bullet list with no bullets in HTML.
      • See the bullet list definition for further information and related links.
      • HTML and web design help and support.