Как работает свойство border-radius при разных значениях ширины и высоты элемента?

Свойство border-radius задаёт радиус закругления каждого из углов элемента. doka.guide Если значение задано в процентах, то оно вычисляется в зависимости от размеров элемента. doka.guide itchief.ru

Горизонтальные размеры вычисляются от ширины элемента, а вертикальные — от высоты. doka.guide Например, для квадратного элемента можно задать border-radius: 50%, чтобы сделать его круглым. doka.guide

Однако есть исключение: если суммарное значение радиуса границы для двух смежных углов превышает размер элемента, то браузер выполняет дополнительные вычисления для пропорционального масштабирования радиуса границы каждого угла до тех пор, пока они не пересекутся. habr.com

Также есть возможность указать закругление в абсолютных единицах, при этом значение может быть больше, чем максимальная ширина и высота блока. doka.guide В таком случае, если указывать закругление в процентах, это может привести к вытягиванию блока. doka.guide