I have one div with primitive styles

```
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 16px;
height: 16px;
box-sizing: border-box;
border: solid 1px #cfcfcf;

```

and `:after` pseudoelement on it

```
content: '';
display: flex;
width: 14px;
height: 14px;
background: #3fcaca;
border-radius: 50%;

```

But such divs look different in the different screen area. Browser zoom is 100%

I am using 15 inch full HD screen with windows up-scaling which obviously is the reason. Is there a way to fix such things by some CSS adjustments?

[![enter image description here](https://i.stack.imgur.com/KbVnI.png)](https://i.stack.imgur.com/KbVnI.png)