Почему круг неравномерный, и можно ли его как-нибудь сделать равномерным?

Question

Неравномерность играет от браузера к браузеру, или от изменения высоты/ширины окна браузера.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <title>Круг</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <!--
    Основной контэйнер:
    -->
    <div class="container">

        <!--
        Круг:
        -->
        <div class="circle"></div>
        
        <!--
        Значения:
        -->
        <div class="numbers">
            <span>77</span>
        </div>

    </div>

</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #272727;
}

/*
Основной контэйнер:
*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/*
Круг:
*/
.circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7f7f7f;
    width: 284px;
    height: 284px;
    border-radius: 50%;
}

/*
Круглый псевдоэлемент (в цвет основного
фона) - заслоняет светлый круг:
*/
.circle::before {
    content: '';
    position: absolute;
    inset: 0.5px;
    border-radius: 50%;
    background: #272727;
}

/*
Значения:
*/
.numbers {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 9px;
}

span {
    color: #f7f7f7;
    font-family: Arial, sans-serif;
    font-size: 140px;
}

Answer 1

Ваш пример можно очень упростить, у вас очень много лишнего.
Проблема происходит из-за того что вы задаете дробные части значений. Вот это

inset: 0.5px;

Браузер высчитывает по своему. Вот вам пример

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #272727;
}

.container {
  position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7f7f7f;
    width: 284px;
    height: 284px;
    border-radius: 50%;
}

.circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    inset: 1px;
    border-radius: 50%;
    background: #272727;
}


/*  TEST */
.circle_test::before{
inset: 0.5px;
}

.numbers {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10px;
}

span {
    color: #f7f7f7;
    font-family: Arial, sans-serif;
    font-size: 140px;
}

<div class="container">
  <div class="circle"></div>
  <div class="numbers">
    <span>77</span>
  </div>
</div>
<div class="container">
  <div class="circle circle_test"></div>
  <div class="numbers">
    <span>78</span>
  </div>
</div>

Answer 2

А в чём удовольствие от накладывания кругов друг на друга? Не проще border в 1px задать? Меньше всё равно не бывает, не мучайтесь. Дробные пиксели только на канве получаются.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #272727;
}

/*
Основной контэйнер:
*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/*
Круг:
*/
.circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #272727;
    width: 284px;
    height: 284px;
    border-radius: 50%;
    border: 1px solid #7f7f7f;
}

/*
Круглый псевдоэлемент (в цвет основного
фона) - заслоняет светлый круг:
*/
/*
.circle::before {
    content: '';
    position: absolute;
    --inset: 0.5px;
    border-radius: 50%;
    background: #272727;
    width: 283px;
    height: 282px;
    top:1px;
}
*/
/*
Значения:
*/
.numbers {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 9px;
}

span {
    color: #f7f7f7;
    font-family: Arial, sans-serif;
    font-size: 140px;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <title>Круг</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <!--
    Основной контэйнер:
    -->
    <div class="container">

        <!--
        Круг:
        -->
        <div class="circle"></div>
        
        <!--
        Значения:
        -->
        <div class="numbers">
            <span>77</span>
        </div>

    </div>

</body>
</html>

БЛОГ НА HUSL

Почему круг неравномерный, и можно ли его как-нибудь сделать равномерным?

Ответы (2 шт):