 |
|
||||
Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS |
Como criar bordas arredondadas em CSS usando a propriedade border-radiusQuantidade de visualizações: 738 vezes |
|
Nesta dica mostrarei como podemos criar uma DIV com cantos arredondados usando a propriedade border-radius do CSS. A técnica de deixar uma borda redonda no CSS está sendo usada em muitos sites, razão pela qual você deverá dominá-la também. A propriedade border-radius nos permite definir o raio de arredondamento dos quatro cantos de um elemento HTML, em geral elementos DIV e imagens. Veja uma página HTML completa na qual temos uma DIV com cantos arredondados e uma borda de 1px para que o efeito seja melhor visualizado:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
#m_div{
background-color: #f1f8e9;
padding: 10px;
width: 400px;
height: 350px;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="m_div">Veja esta DIV</div>
</body>
</html>
Note que border-radius é uma forma reduzida das quatro propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. Podemos usar essas propriedades individualmente ou usar a forma abrevida. Experimente, por exemplo, a seguinte combinação de valores para a propriedade border-radius: border-radius: 0px 50px 0px 50px Note o efeito interessante que é gerado nas bordas da DIV. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
