I'm working on a website that has a 3-dot menu button in the top. Each of these dots is 4 pixels wide and height, has border-radius: 100% and margin set to 2 pixels.

.dot {
    background: black;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    border: 0;
    padding: 0;
    display: inline-block;
    margin: 2px;
}
<div class="dot"></div>

In Chrome 73, it is neither rounded, nor its proportions are 1:1 as you can see on the following picture. It works perfectly, however, on Safari and Firefox.

https://ibin.co/4gvT3AAmOLRr.png

https://ibin.co/4gvTRW3jy4jD.png

Anyone has an idea how to fix it? If I make it bigger or increase the margin, it displays it correctly, but I would like to keep these sizes. Thanks!

-- UPDATE --

This is the minimal code that reproduces the error for me.

<style>
  .menu-toggle{
    display: flex;
    border: 0;
    background: transparent
  }
  .menu-toggle .dot{
    background: black;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    border:0;
    padding: 0;
    display: inline-block;
    margin: 2px
  }
</style>

<nav id="site-navigation" class="main-navigation">
  <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="dot"></span><span class="dot"></span><span class="dot"></span></button>
</nav><!-- #site-navigation -->

Also, if it helps, I am using MacBook Pro (Retina, 15-inch, Late 2013) with NVIDIA GeForce GT 750M 2 GB, Intel Iris Pro 1536 MB and the external screen is LG 27UD88-W. The error is on both screens.

-- UPDATE 2 --

It does the same problem even if I disable the border-radius, the dots aren't the same width: https://ibin.co/4gvn4EJHniRz.png

Also, I found out, that if I go to inspect mode and I toggle the device, it works perfectly.

2 Answers

0
Tobiq On

border-radius should be 50% for a circular shape. Also you need to make sure the contents of the circle takes up no space.

As soon as the circle has visible contents, it will turn into a tube (as the width expands).

.dot {
    background: black;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    font-size: 0;
    display: inline-block;
    margin: 2px;
}

.wrong {
    border-radius: 100%;
}
<div class="dot"></div>
<div class="dot wrong"></div>

I wasn't actually able to reproduce your non-circle, but this may be the browser compensating for your mistake.

0
Nimsrules On

The first thing you gotta do is to change your border-radius to 50%. If you still fail to achieve the desired pure circle, try masking it with a single pixel like so:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);