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

124

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 :

raio da borda do pixel (px)por cento (%) raio da borda

Valor de pixel para o raio da borda:

Valor percentual para o raio da borda:

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?

web-tiki
fonte

Respostas:

180

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

O raio da borda em porcentagem (%) faz reticências

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.

O raio da borda em pixels (px) forma uma pílula


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>

web-tiki
fonte
6
Excelente resposta. É uma pena que os valores percentuais do raio sejam calculados separadamente para largura e altura. Isso significa que não consigo obter cantos circulares que escalam com o tamanho do objeto, sem conhecer a proporção do objeto. Não seria bom se a porcentagem aplicada à maior das dimensões dos objetos?
Chris Dennis
4
@ ChrisDennis Isso não é verdade. Como o OP disse, você pode simplesmente usar border-radius: 999px;. Dessa forma, você começa seus cantos circulares e ter certeza que eles escala com o seu elemento
Gust van de Wal
9
Mas talvez eu não queira pontas semicirculares na caixa. Gostaria de poder especificar o raio x como, digamos, 10% da largura da caixa e o raio y igual ao raio x.
Chris Dennis
4
Ei, você fez outro post auto-respondido como este? Eu gostaria de ler isso.
Ced
3
Mas o que realmente funciona com porcentagem é: border-radius: 50%/100%(Testado no Chrome 60 + 61)
denns
6

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.

CyberJ
fonte
1
Não são apenas 25% da largura e 50% da altura? Isso não é o mesmo que 50% da altura nas direções X e Y.
M4 #
que diabos é essa sintaxe! funciona! Eu nunca soube que existia, é legal!
Uri Kutner
É só matemática bro
CyberJ 26/03
Não sei que tipo de matemática você está fazendo, mas não é "apenas matemática". É uma abreviação especialmente definida para o raio da borda que não tem nada a ver com a divisão aritmética. w3.org/TR/css-backgrounds-3/#border-radius
MI Wright