Идея в том, чтобы сделать универсальный контрол-шкалу, которая должна выглядеть эстетично при любых своих относительных размерах. Длинная узкая шкала должна иметь тонкие рамки, как бы она ни удлинялась. Короткая широкая шкала должна иметь определённые рамки сообразно своему размеру, но если она ближе к квадрату, то при увеличении рамки должны тоже увеличиваться (и наоборот, уменьшаться при уменьшении). Вобщем, контрол должен подстраивать свой вид под свои относительные размеры. Это можно прописать даже одним конкретным правилом. Например: толщина рамок должна быть 10% от размера меньшей стороны. Такого сделать, похоже, без расчётов нельзя.

У вас когда прямоугольники вытянуты, их контент почти съедается рамками.

Вот для примера, как должен выглядеть один и тот же контрол-шкала в зависимост от своего размера и направления вытянутости. Я его делаю двумя вложенными контейнерами, т.к. нужно иметь шкалу заполнения, задний фон шкалы заполнения (тут не показан), и рамки вокруг этого всего - всё потенциально разных цветов. Одним контейнером этого не добиться.

Видите, тонкие шкалы имеют тонкие и при этом одинаковые рамки, какими бы длинными они ни были. Короткие шкалы имеют всё ещё тонкие рамки, пока их большая сторона не станет меньше меньшей - тогда рамки должны начать уменьшаться. Если меньшая сторона увеличивается, то увеличиваются и толщины рамок, пока меньшая сторона не достигнет размера большей. Такое поведение позволяет шкале и её рамкам выглядеть красиво и аккуратно при любых изменениях её размера - как абсолютного, так и относительного (длины относительно ширины). Если бы шкала была большой, но с тонкими рамками, как если задвать пикселями, то это бы плохо выглядело, т.к. рамки были бы почти незаметны при таком размере заполнения шкалы.

Пиксели ещё не подходят, т.к. не подстраиваются сами под устройства с разными разрешениями и разными физическими размерами экрана. Пикселями можно задавать, только если их вычислять по правилу, что я выделил жирным. А если чисто стилям следовать, то там лишь брать абсолютные величины контейнера и от них уже задавать относительные (minWidth * 10%, например).