How to create an unordered list with circle bullets in HTML?

HTML Web Development Front End Technology

To create unordered list in HTML, use the <ul> tag. The unordered list starts with the <ul> tag. The list item starts with the <li> tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles.

For creating an unordered list with circle bullets, use CSS property list-style-type. We will be using the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <ul> tag, with the CSS property list-style-type to add circle bullets to an unordered list.

Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet.

Example

You can try to run the following code to create an unordered list with circle bullets in HTML −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Unordered List</title>
   </head>
   <body>
      <h1>Developed Countries</h1>
      <p>The list of developed countries:</p>
      <ul style="list-style-type:circle">
         <li>US</li>
         <li>Australia</li>
         <li>New Zealand</li>
      </ul>
   </body>
</html>

Radhakrishna

Published on 07-Feb-2018 08:42:51

Previous Page Print Page Next Page