Solution 1 :

You cannot change the styling of that circle, but you can apply list-style: none; to the list to hide the list icon and add circle elements using li: before pseudo elements, having the settings as below or similar:

ul {
list-style: none;
li {
position: relative;
li:before {
position: absolute;
left: -1.2em;
bottom: 0.3em;
content: ' ';
display: block;
width: 0.45em;
height: 0.45em;
border: 2px solid lightblue;
border-radius: 50%;
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>

Problem :

I have this bullet when using <li> tag with list-style: circle:

enter image description here

How can I change the border of the circle with css? Like this:

enter image description here


Leave a Reply

Your email address will not be published. Required fields are marked *