Bordas arredondadas

Olá Amanda!

Ao colocar somente: border-radius: 100px, a CSS reconhece que os quatro cantos devem ter esse mesmo raio. Quando especifica-se quatro valores, a CSS aplica-os na ordem: right bottom left top. Faça um teste! Ao invés de colocar 100px 100px 100px 100px, mude somente um dos valores para zero.

Espero ter ajudado!

Amanda, as duas formas estão corretas. Sugiro fazer um teste para melhor entendimento com os exemplos abaixo:

Exemplo 1: border-radius: 100px;
Exemplo 2: border-radius: 100px 0px;
Exemplo 3: border-radius: 100px 30px 0px;
Exemplo 4: border-radius: 100px 0px 0px 0px;

Entenderás como as bordas trabalham com estes valores. Bons estudos.

Amanda, está correto dessa maneira também. Mas você pode escolher o lado que deseja arredondar.

border-radius: x y w z;

x = cima esquerda; y = cima direita; w = baixo direita; z = baixo esquerda;

Para complementar o que o Leonardo disse e ficar mais fácil se lembrar de qual opção vai alterar qual borda...

Geralmente estas regras que permitem alterar tudo de uma vez ao invés de uma propriedade pra cada lado, basta interpretar que as opções vão no sentido horário.

Exemplo:

Posso definir:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

Claro que no caso acima não importa a ordem, eu poderia ter misturado.

Mas também podemos definir apenas com o comando padding todas estas opções:

padding: 10px 10px 10px 10px;

No caso como em um relógio, cima, direita, baixo, esquerda.

Para facilitar ainda mais, no caso do valor ser o mesmo para todas as opções:

padding: 10px;

Mas se você quisesse o mesmo padding para direita e esquerda, e um diferente das laterais, mas igual para o topo e abaixo:

padding: 10px 20px;

Em sentido horário, topo vem primeiro, então a primeira opção aplicará para o topo e abaixo. A segunda será aplicada para ambas as laterais.