Bordas arredondadas com CSS 3

Nível: avançado

Desde de que passei a usar bordas arrendondadas (corner rounded) por aqui, há vários leitores pedindo que eu conte, em português, como se usa esse recurso. Neste blog não uso aquelas gambiarras complicadas para que os cantos das bordas apareçam curvos em todos os browsers. Eu utilizo border-radius, que é uma novidade da CSS3 e funciona nos seguintes navegadores:

• Firefox 3.0 ou superior
• Flock 2.5 ou superior
• Chrome 3.0 ou superior
• Opera 10.5 ou superior
• Safari 3 ou superior

Não funciona nos browsers:

• Internet Explorer 8 ou inferior
• Opera 10 ou inferior

Se estiver usando um desses dois navegadores incompatíveis, você continuará vendo as bordas quadradas.

O pré-requisito para entender este tutorial é saber usar bordas. Caso ainda não tenha esse conhecimento, visite o post Aprendendo a usar bordas.

1º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.

► Folha de estilos comum:

<style>
#redondo {padding:20px; border:5px #ffa500 solid; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;}
</style>

<div id='redondo'>O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

► Folha de estilos do Blogger:

Os estilos do Blogger sempre devem ser definidos acima da linha de código ]]</b:skin>, a não ser que você use uma folha de estilos externa.

#redondo {padding:20px; border:5px #ffa500 solid; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;}
]]></b:skin>

<div id='redondo'>O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

► Inline

<div style="border: orange 5px solid; padding: 20px; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius: 50px">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

Para os demais exemplos vou colocar apenas a versão do código inline.

2º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.

<div style="background:#cd853f; color:#fff; border: #fff 5px solid; padding: 10px; border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

3º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.

<div style="background:#cd853f; color:#fff; border: #cd853f 5px solid; padding: 10px; border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

4º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você estiver não no Internet Explorer ou no Opera.

<div style="background:#9acd32; color:#000; border: #fff 10px solid; padding: 10px; border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

5º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.

<div style="background:#9acd32; color:#000; border: #fff 10px solid; padding: 10px; border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

6º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.

<div style="background:#9acd32; color:#000; border: #fff 10px solid; border-top-color:#adff2f; border-left-color:#adff2f; padding: 10px; border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; border-radius-bottomright: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

Todas as propriedades:

Cantos ↓	Padrão ↓	Flock e Firefox (Gecko) ↓	Chrome e Safari (Webkit) ↓
Todos:	border-radius	-moz-border-radius	-webkit-border-radius
Superior esquerdo:	border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
Superior direito:	border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
Inferior esquerdo:	border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
Inferior direito:	border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius

Outros posts sobre CSS3:

• Como colocar sombra no texto
• Como dividir o conteúdo em colunas automáticas

Até mais!