Entrar Ainda não tem acesso?
1
resposta

Por que não precisa repetir o border radius no botão secundário?

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo A dupla HTML e CSS e atividade Grid e continuação

por Pedro Moutinho Lima
| 17.3k xp | 18 posts

Notei que a instrutora não repetiu o border radious de 5px do botão principal no botão secundário mas mesmo assim a borda dele ficou "arredondada".

Porque eles tem esse mesmo estilo se o border radious não foi aplicadeo duas vezes?

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 5px;
    padding: 1em;
    color: var(--branco-principal);
    display: block;
}

.botao__secundario {
    background-color: transparent;
    border: 2px solid var(--branco-principal)
1 resposta
por Renan Lima
| 3620.9k xp | 7623 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Pedro.

Tudo bem?

Isso acontece porque o border-radius foi aplicado na classe .container__botao e essa classe está nos dois botões, tanto no primeiro quanto no segundo. Já a classe .botao__secundario está somente no segundo botão, portanto os estilos dela só valem para o segundo botão, ou seja, o secundário.

Espero ter ajudado e bons estudos!