Arredondamento de bordas de bloco em CSS
Agora vamos aprender a arredondar os cantos
de um bloco. Para isso, devemos usar a
propriedade border-radius, que aceita
um valor em pixels.
O que significa termos especificado um arredondamento,
por exemplo, de 10px? Este é o raio do círculo
que pode ser inscrito neste arredondamento. Se
você não é bom em matemática e não entendeu
a última frase - esqueça-a e
simplesmente ajuste o arredondamento visualmente. Com
um pouco de experiência, isso não é um problema (não existe
um instrumento de medição para medir arredondamentos,
pelo menos eu nunca ouvi falar de um).
Vamos arredondar os cantos de um bloco, definindo
um arredondamento de 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Repita a página de acordo com este exemplo:
