Как мы устанавливаем радиус верхней границы 50%, не уменьшая границы границ?

Question

Я хотел бы иметь одинаковую ширину границы px по всему полукругу.

Пожалуйста, обратитесь к приложению изображения ниже:

#loader-frame {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff;
  border-top: 3px solid #3498db;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

<div id="loader-frame"></div>

Спасибо за любую помощь.

Answer 1

Вы можете сделать две стороны border-*-color transparent и использовать transform: rotate() по выравнивание it по горизонтали :

#loader-frame {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff;
  border: 3px solid #3498db; /* modified */
  display: flex;
  /*flex-flow: row nowrap; by default*/
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* added */
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

<div id="loader-frame"></div>