Поддержание единообразного радиуса визуальной границы для кнопок разных размеров с помощью CSS Calc() ⇐ CSS

[Anonymous]

Сейчас я работаю над проектом, в котором используются две кнопки разного размера. Обе кнопки имеют одинаковый радиус границы 6 пикселей. Однако при отображении в браузере они имеют разные значения радиуса границы. Кажется, что меньшая кнопка имеет больший радиус границы по сравнению с большей кнопкой, несмотря на то, что для обеих кнопок установлено одинаковое значение пикселя.
Моя цель — сделать меньшую кнопку выглядит как уменьшенная версия более крупной кнопки, сохраняя тот же визуальный радиус границы. Это означает, что обе кнопки должны выглядеть одинаково с точки зрения радиуса границы, независимо от их размера.
Есть ли способ добиться этого с помощью CSS Calc()? Я прошу решение с использованием Calc(), потому что мне не разрешено изменять значение 6 пикселей, поскольку оно будет использоваться в качестве переменной в моем проекте.

Код: Выделить всё

.small {
padding: 0.1rem 0.6rem;
font-size: 0.475rem;
color: white;
border-radius: 6px;
background-color: red;
border: none;
}

.large {
padding: .5rem 3rem;
font-size: 1rem;
color: white;
border-radius: 6px;
background-color: red;
border: none;
}

Код: Выделить всё

Test
Test

Код: Выделить всё

.small {
padding: 0.1rem 0.6rem;
font-size: 0.475rem;
color: white;
border-radius: calc(6px / 2); // This is how I tried to solve it
background-color: red;
border: none;
}

.large {
padding: .5rem 3rem;
font-size: 1rem;
color: white;
border-radius: 6px;
background-color: red;
border: none;
}

Код: Выделить всё

Test
Test

Подробнее здесь: https://stackoverflow.com/questions/786 ... izes-using