Как сделать круг css?

У меня именно flex сжимал ширину.

1. Создайте элемент с классом circle и задайте равные стороны. Для простого пустого div достаточно width: 100px; height: 100px; background: teal; border-radius: 50%;. Фон сделает фигуру видимой, даже если внутри ничего нет.
2. Посмотрите итоговые размеры, а не только два числа в исходном CSS. На результат могут влиять padding, border, min-width и правила родительской раскладки. При добавлении рамки удобно использовать box-sizing: border-box, чтобы ширина и высота включали ее в заданный размер.
3. Если круг находится во flex-ряду, проверьте сжатие. Заданная ширина может уменьшиться из-за нехватки места, пока высота останется прежней. Для небольшого значка фиксированного размера можно запретить сжатие через flex-shrink: 0 и отдельно решить, куда должны переноситься соседние элементы.
4. Для адаптивного пустого круга задайте ширину и aspect-ratio: 1, оставив высоту автоматической. Не ждите от этого свойства исправления двух явно заданных несовместимых размеров. Содержимое, которому тесно, тоже способно повлиять на расчет.
5. Для аватара используйте img с равными размерами, border-radius: 50% и object-fit: cover. Последнее сохранит пропорции исходного фото, заполнив круг с обрезкой части кадра. Если важная часть лица срезана, подберите object-position или сам кадр.
6. Если изображение лежит внутри отдельной круглой обертки, скругления только у обертки может быть недостаточно для обрезки потомка: настройте overflow и проверьте результат. Не скрывайте полезный текст внутри маленького круга ради формы. Круглая декоративная метка и полноценная кнопка с названием имеют разные требования к содержимому.

Для аватара с cover лицо перестало вытягиваться.

Овал появляется из-за разных размеров коробки. Border-radius: 50% скругляет ее по горизонтали и вертикали относительно соответствующих сторон, а не превращает любой прямоугольник в круг. Задайте одинаковые width и height, например по 100px, и проверьте итоговые размеры в браузере.

Если элемент стоит во flex-контейнере и сжимается по ширине, рассмотрите flex-shrink: 0 для фигуры, которой нужен фиксированный размер. При рамке и внутренних отступах используйте border-box, чтобы проще контролировать внешние стороны. Для гибкой фигуры подходит aspect-ratio: 1 при автоматической высоте и заданной ширине. Текст или ограничения размеров могут изменить такой блок, поэтому декоративный круг и контейнер с длинной надписью требуют разных проверок.