демонстрация
Давайте рассмотрим вопрос по-другому с этой демонстрацией картины:
Давайте сначала посмотрим, как получается радиус границы?
Чтобы получить радиус, требуется две стороны его границы. Если вы установите border-radius на 50 пикселей, то потребуется 25 пикселей с одной стороны и 25 пикселей с другой стороны.
И, взяв 25 пикселей с каждой стороны, получилось бы так:
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 0 50px 0 0;
}
Теперь посмотрим, сколько может потребоваться максимум квадрата для применения на одном углу?
Это может занять до 180 пикселей сверху и 180 пикселей справа. Тогда это будет выглядеть так:
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 0 180px 0 0;
}
И посмотрите, как это получается, если мы устанавливаем неравное значение радиуса?
Предположим, если вы примените радиус границы только к двум углам неравномерно:
Тогда это займет
Тогда это будет производить так
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 0 180px 100px 0;
}
Какую максимальную площадь его границы может занять площадь, чтобы применить ее со всех сторон? И посмотрите, как получается круг?
Это может занять до половины размера рамки, то есть 180 пикселей / 2 = 90 пикселей. Тогда бы получился такой круг
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 180px;
}
Почему для нанесения со всех сторон требуется только половина площади?
Потому что все углы должны установить одинаковое значение радиуса.
Взяв равные части своей границы, он производит круг.