Fazer div com borda arredondada sem imagens HTML/CSS

Olá a todos.

A mais ou menos dois anos atrás, enquanto ainda estava aprendendo o básico de HTML e web em geral, lembro-me de querer fazer um layout com bordas arredondadas, o que até então era um pouco complicado e necessitava do uso de imagens, ou de códigos enormes e feios, como este.

Para o bem de todos o CSS3 trouxe a nova propriedade border-radius, que faz exatamente isto com apenas uma linha de código.

Por exemplo, se quisermos criar uma div com os quatro cantos arredondados em 25pixels (de onde começa até onde termina o canto), basta adicionarmos no estilo a propriedade border-radius: 25px;

O resultado será esse:

Já se quisermos apenas arredondar apenas os cantos de cima, fazemos definindo os valores dos quatro cantos na ordem: cima/esquerda, cima/direita, baixo/direita, baixo/esquerda. Ficará assim:

Somente embaixo é a mesma lógica:

No site da w3schools há uma documentação completíssima sobre esta propriedade e para quem precisa de mais informações eu recomendo fortemente a visita.

Já para quem quiser algo mastigado, o site http://border-radius.com/ faz todo este trabalho automaticamente e na hora.

Caso desejarem, aqui está um arquivo .html com os códigos acima para visualizarem melhor.

Abraço e até a próxima.