[Solved] How do we set border-top-radius 50% without diminishing the border edges?

by


You can make two sides of the border-*-color transparent and use the transform: rotate() to align it horizontally:

#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>

0

solved How do we set border-top-radius 50% without diminishing the border edges?