Guia CSS – Como Arredondar Elementos com CSS
Olá Queridos Blogueiros, hoje irei ensinar algo MUITO fácil, mas que muitos blogueiros tem dificuldade de fazer, arredondar bordas e elementos. É muito fácil arredondar bordas, mas muitas pessoas já me pediram para ensinar isso, mas como tento sempre satisfazer nossos leitores, resolvi então ensinar a fazer isso facilmente. Irei dar um código bem simples para fazer isso, que é feito em css.
Para arredondar Bordas, é necessário usar o elemento border-radius, que varia para -webkit e -moz, dependendo do navegador, -webkit no Chrome, e -moz no Mozilla. Usaremos as 3 seguintes propriedades, onde 25 é o número que indica a profundidade da borda, quando menor, menos arredondado será o elemento:
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;Para aplica-lo de forma definitva, podemos usar uma div e uma classe para estilizar essa div. Como por exemplo o seguinte elemento:
<div id="elemento-arredondado"></div>E a Seguinte classe:
#elemento-arredondado {
height: 200px;
width: 200px;
background: gray;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
Lembrando que, as Divs ficam abaixo de , e css, no Blogger fica acima de ]]></b:skin> e no WordPress, fica dentro de style.css (estilo). Width determina a largura, que é 200 pixels, height determina a altura, que é 200 pixels, background determina o fundo, que é cinza (gray), e os três códigos seguintes estilizam o elemento com uma borda de 25 pixels. Agora vamos ver o Resultado:
