Raio da borda em porcentagem (%) e pixels (px) ou em

Se eu usar um valor de pixel ou em para o raio da borda, o raio da borda será sempre um arco circular ou uma forma de pílula mesmo que o valor seja maior que o lado maior do elemento.

Quando uso porcentagens , o raio da aresta é elíptico e começa no meio de cada lado do elemento, resultando em uma forma oval ou elíptica :

Valor de pixel para o raio da borda:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

Valor percentual para o raio da borda:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

Por que o raio da borda em porcentagens não age da mesma maneira que o raio da borda definido com valores de pixel ou em?

Raio da borda:

Primeiro, você precisa entender que a propriedade border-radius usa 2 valores. Esses valores são os raios no eixo X / Y de um quarto de elipse que define a forma do canto.
Se apenas um dos valores estiver definido, o segundo valor será igual ao primeiro. Então border-radius: xé equivalente a border-radius:x/x;.

Valores percentuais

Referindo-se às especificações do W3C: Módulo CSS Backgrounds and Borders Level 3 propriedade border-radius, é o que podemos ler sobre os valores percentuais:

Porcentagens: consulte a dimensão correspondente da caixa de borda.

Então border-radius:50%;define o raio da elipse da seguinte maneira:

• os raios no eixo X são 50% da largura dos contêineres
• os raios no eixo Y são 50% da altura dos contêineres

Pixel e outras unidades

Usar um valor diferente de uma porcentagem para o raio da borda (em, in, unidades relacionadas à porta de visualização, cm ...) sempre resultará em uma elipse com os mesmos raios X / Y. Em outras palavras, um círculo .

Quando você define border-radius:999px;os raios do círculo, deve ser 999px. Mas outra regra é aplicada quando as curvas se sobrepõem, reduzindo os raios do círculo para metade do tamanho do lado menor. Portanto, no seu exemplo, é igual à metade da altura do elemento: 50px.

Neste exemplo (com um elemento de tamanho fixo), você pode obter o mesmo resultado com px e porcentagens. Como o elemento é 230px x 100px, border-radius: 50%;é equivalente a border-radius:115px/50px;(50% de ambos os lados):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Apenas divida o primeiro valor pelo% desejado. Portanto, se você quiser um raio de borda de 50%, escreva:

border-radius: 25%/50%; 

ou outro exemplo:

border-radius: 15%/30%;

Você pode facilmente fazer as contas em js ou SASS.