Suavizando as bordas com CSS 3
Olá Pessoal,
Neste post vou ensinar como definir um radius para um box dando aquela impressão de cantos arredondados com a propriedade border-radius do CSS.
Antes devo informar que o CSS 3 não é totalmente suportado por todos os navegadores. O código foi testado em 5 navegadores sendo eles: Firefox 3, Internet Explorer 8, Google Chrome 2, Opera 9.64 e Safari 4. Os únicos que apresentam a incopatibilidade com o CSS 3 foram o Internet Explorer 8 e o Opera 9.64.
Criando o nosso código CSS
.cantosArredondados{
text-align:center;
color:#FFF;
width:150px;
background-color:#999;
border:1px #000 solid;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
Atribuindo o código CSS há uma tag:
<p class="cantosArredondados">Olá Mundo!</p>
Resultado:
Este recurso para deixar os cantos arredondados de um box utiliza os prefixos -webkit e -moz, e é recomendável utilizar um espaçamento ( padding ) para não atingir a borda do box em questão.
Abração a todos e até a próxima.