0

Opa gente, eu to refazendo um projeto meu e apareceu um problema: as bordas dos botões não estão arredondando direito. Eu mudei o boder-radius de 10% para 20% para visualizarem melhor o problema.

.botao {
    align-items: center;
    background: #f8b195;
    border: solid;
    border-radius: 20%;
    box-sizing: border-box;
    color: #fa8072;
    display: flex;
    font-size: var(--tamanho-botao);
    font-weight: 700;
    height: 3rem;
    justify-content: center;
    padding: calc(var(--tamanho-botao) - 1rem) 8rem;
    text-decoration: none;
    width: 15%;
}
<a href="#" class="botao menu__botao menu__botao--menu">Menu</a>

No projeto original era ele havia ficadp da maneira que eu queria, assim:

Borda corretamente arredondada

Se alguém puder me ajudar eu agradeço!

1 Resposta 1

3

Isso ocorre porque você está usando porcentagem, quando você aplica border-radius: 20%, funcionará equivalente a:

border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;

O raio vai se basear na altura e na largura para cada "eixo", sendo, por exemplo, no border-top-left-radius obtido para o "eixo" X do raio aplicado 20% da largura do elemento HTML (no seu caso o link) e no "eixo" Y, aplicado 20% da altura.

Sendo a largura de aproximadamente de 5.5rem (estou aproximando porque não tem valor fixo), então o eixo X de 20% do border-top-left-radius seria aproximadamente 1.1rem

A altura do elemento sendo de 3rem o eixo Y do raio terá aproximadamente 0.6rem.

Claro que em qualquer um dos casos você só vai ver um quarto desse raio, ficando X=0.55rem e Y=0.3rem, então basicamente você teria:

eixos do raio

E distribuído no elemento:

border-radius no elemento


Para resolver você pode trocar por valores fixos, como por exemplo border-radius: 0.8rem; (aparentemente é o valor aproximado da imagem que postou), exemplo:

.foo, .bar, .baz {
    border-radius: 0.8rem;

    align-items: center;
    background: #f8b195;
    border: solid;
    box-sizing: border-box;
    color: #fa8072;
    display: flex;
    height: 3rem;
    justify-content: center;
    width: 15%;
    margin-bottom: .4rem;
}

.bar {
    width: 30%;
}

.baz {
    width: 90%;
}

.percentage {
   border-radius: 20%;
}
<h2>border-radius: rem</h2>
<div class="foo">Menu</div>
<div class="bar">Menu</div>
<div class="baz">Menu</div>
<hr>
<h2>border-radius: %</h2>
<div class="foo percentage">Menu</div>
<div class="bar percentage">Menu</div>
<div class="baz percentage">Menu</div>

1
  • Funcionou, muito obrigado! 8/02/2022 às 12:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .