Border-radius é uma propriedade CSS3 que destina-se a deixar as bordas de elementos arredondadas de acordo com o valor fornecido, o que exclui a opção de usar imagens para chegar ao resultado que deseja.

Não irei aprofundar muito o assunto e chegarei a uma conclusão mais prática e rápida e com um entendimento um tanto quanto completo. Indico que se quer chegar a uma forma mais bruta e entendida do assunto, que se procure tutoriais mais completos pela Web.

Os elementos geralmente se dividem em 4 (quatro) partes, e você pode definir um valor para todas as 4 (quatro) partes ou definir individualmente bordar por borda.

Na definição dos valores borda por borda (individuais), a ordem dos vértices é a seguinte:

1. Superior esquerdo
2. Superior direito
3. Inferior esquerdo
4. Inferior direito

Vamos a um primeiro exemplo:

Código:


.elemento {
width: 150px;
height: 150px;
background-color: #FFF;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #FFF;
}


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Imagem ilustrativa do resultado.

Esse é o elemento com a definição geral de todas as bordas, ou seja, todas as 4 (quatro) partes do elemento ficaram com a borda arredondada.

Vamos a um segundo exemplo:

Código:


.elemento {
width: 150px;
height: 150px;
background-color: #FFF;
border: 1px solid #000;
border-radius: 0px 4px 0px 4px;
-moz-border-radius: 0px 4px 0px 4px;
-webkit-border-radius: 0px 4px 0px 4px;
color: #FFF;
}


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Imagem ilustrativa do resultado.

Esse é o elemento com a definição borda por borda, ou seja, cada uma das 4 (quatro) bordas envolvem um valor diferente. Lembre-se de que as bordas são definidas da seguinte maneira:

1. Superior esquerdo
2. Superior direito
3. Inferior esquerdo
4. Inferior direito

Usando todas essas propriedades de border-radius listados nos exemplos, seu elemento será praticamente suportado por todos os navegadores atuais.

Créditos: Je4n

Olá,

Muito bom o tutorial! :-)
Obrigado por compartilhar!

Ótima função, além de já saber dela, irá ajudar alguns!
Obrigado por Compartilhar!

Ótimo tutorial, com certeza será muito útil, parabéns pelo trabalho. Obrigado por compartilhar vosso conhecimento com o Fórum!

Até mais.