How to Add Square Bullet Points in CSS – A Simple Guide

When designing lists in HTML, customizing bullet points can enhance the visual appeal and align the style with your brand or website theme. One simple and effective customization is changing the default round bullets to square bullet points. In this blog, we’ll explore how to do that using CSS.

Table of Contents

✅ What Are Bullet Points in HTML Lists?

In HTML, unordered lists (<ul>) come with default bullet points. These are typically disc-shaped (●), but you can easily change them using the CSS list-style-type property.

🧱 Changing Bullet Points to Squares with CSS

To change the bullets of an unordered list to squares, use the list-style-type property and set its value to square.

📌 Basic Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Square Bullet Example</title>
  <style>
    ul.square-bullets {
      list-style-type: square;
    }
  </style>
</head>
<body>

  <h2>Features:</h2>
  <ul class="square-bullets">
    <li>Fast loading</li>
    <li>Responsive design</li>
    <li>SEO friendly</li>
  </ul>

</body>
</html>

🔍 Explanation:

ul.square-bullets selects the unordered list with the class square-bullets.
list-style-type: square; changes the default round bullet to a square (■).

🎨 Additional Styling Tips

1. Custom Color for Text and Bullet:

To change the color of the bullet point, you generally style the text because the bullet inherits its color:

ul.square-bullets li {
  color: #007BFF;
}

2. Remove Default Indent:

You can remove the default left padding:

ul.square-bullets {
  padding-left: 0;
  margin-left: 20px; /* Optional custom indent */
}

3. Using `list-style` shorthand:

ul.square-bullets {
  list-style: square inside;
}

square: The shape of the bullet.
inside: Positions the bullet inside the content block.

💡 Bonus: Add Custom Square Images as Bullets

If you want more control and design flexibility, you can even use an image as the bullet:

ul.custom-image-bullets {
  list-style-image: url('square-icon.png');
}

Just ensure the image is small and square for best results.

🧾 Conclusion

Using list-style-type: square is a quick and simple way to enhance your unordered lists with square bullet points. It’s supported across all major browsers and requires minimal code. Whether you’re working on a modern portfolio, a blog, or a corporate site, this subtle change can contribute to a more tailored and polished user experience.