Это легко, когда у твоего блока статическая ширина и тяжело, когда она на флексах.
Так же это легко, когда у тебя залитой фон, а не тонкий бордер в 1px

но у тебя тут нет бордера) это всё целиком один path

Еще divider если нужен в 1px, то лучше делать с помощью бордеров и задавать через thin, потому что 1px  высоты\ширины иногда превращается в 2

точно так же как тут, самый надёжный способ нажить себе проблем — это решить забить на свг и попробовать чертить это всё сложением и вычитанием разноцветных дивов

У меня растояние между скруглениями динамическое

ну как и path внутри реакт-компонента)

можно вплоть до такого)

Ширина табки разная и может быть в любом месте сверху

Это хорошо, когда у тебя не бордер в 1px

банальный пример с divider в 1px я навёл

И не просто разная, а динамически в зависимости от ширины окна сжимается - разжимается

Это бага движка отрисовки - для одних блоков он округляет сабпиксели по одному, для других по другому

И вот как бы не я один с этим сталкивалсяhttps://github.com/mui-org/material-ui/pull/18965

Потому меня и заинтересовала фраза, что в браузерах всё гуд работает. Может я просто не знаю, о способе решения подобной проблемы, а кто-то её решил, вот и решил уточнить.

Высчитывать ширину и координаты на js пробовал , на чистом css пробовал - без результата.
Скругления делал как на svg, так и на css  - не имеет значения на чём, если элементы нужно позиционировать относительно друг друга.

Одним цельным куском это решить мне пока не удалось, только двумя.
Собственно сама табка, и бэкграунд с скруглениями , который я накладываю поверх смещаю на 1px ниже.
Скругления по 5px, потому у меня всегда ширина накладываемого блока calc(100%+10px) относительно табки.

Это работает, но порой видны заломы линии. Не всегда на 1px, порой на половину или и того меньше, но зоркий глаз это заметит.

Вариант отрисовки на canvas пока отложил.
Там уйдет проблема со скруглениями, но уйдёт она на боковые грани - может вылазить влево-вправо за родительский блок, так как я снова буду накладывать один элемент относительно другого, просто это уже будет цельная линия.
Проблема с чуть выше\ниже не так будет заметна.

Если будут идеи, как это решить - буду благодарен)

Вот статья раскрывающая суть проблемы.
https://chenhuijing.com/blog/about-subpixel-rendering-in-browsers/

я короче начал пробовать нарисовать бордер на svg и вставить в css, решил свериться с докой по border в css и чёт офигел 🤪 https://dev.to/jackharner/using-svg-as-a-border-with-css-57ib

border-image-slice позволяет разделить одно изображение на несколько частей