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>
#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>
]]></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:
Até mais!
10 comentando:
Para deixar uma mensagem sem relação com o post acima use o livro de visitas. Está comentando pela primeira vez no HTMHelen? Sugiro que leia as regras para comentar.