 |
|
Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS |
Como criar bordas arredondadas em CSS usando a propriedade border-radiusQuantidade de visualizações: 904 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 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 |
|
Laravel - Como criar um CRUD completo em Laravel 8 - CRUD em Laravel usando PHP e MySQL (MariaDB) - Parte 1 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
