Olá Pessoal, neste tutorial iremos ver como arredondar os cantos das bordas por meio de CSS3 e fazer funcionar em todos os navegadores.
Antes do CSS3, para criarmos bordas arredondadas era preciso escrever bastante código CSS e usar diversas imagens, mas com a chegava do novo CSS esse trabalho ficou muito mais fácil, em apenas três linhas é possível fazer um Box com cantos arredondados aparecer em todos os principais navegadores e ainda poder definir o quanto arredondado ficará a borda.
Vamos à parte prática, que é o que interessa.
Conheça mais sobre o CSS
Criando documento HTML
Primeiro criamos um documento HTML que será onde ficará o nosso Box, como mostra a Listagem 1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordas Arredondadas</title>
<style type="text/css">
#box{
width:300px;
height:100px;
background-color:#666;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- iremos criar nossa div onde ficará o box arredondado -->
<div id="box"></div>
</body>
</html>Note que usamos o CSS para estilizar a div criada pelo HTML, nela colocamos largura e altura que desejamos e também colocamos uma propriedade nova, chamada border-radius. Com ela é possível arredondar todas as bordas sem precisar de usar imagens para fazer isso, como mostra a Listagem 2.
<style type="text/css">
#box{
/*definimos a largura do box*/
width:300px;
/* definimos a altura do box */
height:100px;
/* definimos a cor de fundo do box */
background-color:#666;
/* definimos o quão arredondado irá ficar nosso box */
border-radius: 10px;
}
</style>Como podemos ver na Figura 1, o nosso Box terá 10px de bordas arredondadas, isso quer dizer que todas as quatro bordas terá o valor de 10px.
Figura 1. Bordas com 10px de arredondamento
Assim como as propriedades margin, padding e border, é possível definir valores diferentes para cada canto. Na Listagem 3 mostraremos alguns exemplos e como deverá ficar exibido após:
<style type="text/css">
#box{
/*definimos a largura do box*/
width:300px;
/* definimos a altura do box */
height:100px;
/* definimos a cor de fundo do box */
background-color:#6495ed;
/* definimos o quão arredondado irá ficar nosso box */
border-radius: 10px 20px;
}
</style>O exemplo anterior ficará da mesma forma que apresentado na Figura 2.
Figura 2. border-radius: 10px 20px 30px;
<style type="text/css">
#box{
/*definimos a largura do box*/
width:300px;
/* definimos a altura do box */
height:100px;
/* definimos a cor de fundo do box */
background-color:#6495ed;
/* definimos o quão arredondado irá ficar nosso box */
border-radius: 10px 20px 30px;
}
</style>O exemplo da Listagem 4 ficará como na Figura 3.
Figura 3. border-radius: 10px 20px 30px;
<style type="text/css">
#box{
/*definimos a largura do box*/
width:300px;
/* definimos a altura do box */
height:100px;
/* definimos a cor de fundo do box */
background-color:#6495ed;
/* definimos o quão arredondado irá ficar nosso box */
border-radius: 10px 20px 30px 40px;
}
</style>O exemplo da Listagem 5 ficará como na Figura 4.
Figura 4. border-radius: 10px 20px 30px 40px;
Caso você queira arredondar os cantos separadamente, também é possível. Abaixo as opções de alteração separadamente e você pode testar e ver quais são os resultados.
- border-radius-topleft para o canto superior esquerdo;
- border-radius-topright para o canto superior direito;
- border-radius-bottomright para o canto inferior direito;
- border-radius-bottomleft para o canto inferior esquerdo.
Exibir no Firefox
Para exibir no Firefox é praticamente a mesma coisa, como mostra a Listagem 6: a única diferença é que usamos o prefixo “-moz-“ antes de “border-radius”, ficando “-moz-border-radius: X px;
<style type="text/css">
#box{
/*definimos a largura do box*/
width:300px;
/* definimos a altura do box */
height:100px;
/* definimos a cor de fundo do box */
background-color:#6495ed;
/* definimos o quão arredondado irá ficar nosso box */
border-radius: 10px;
/* Declaração para aparecer no Firefox */
-moz-border-radius: 10px;
}
</style>Assim como o Firefox, os outros navegadores, como Chrome, Safari, Opera, IE precisam de um prefixo para funcionarem também, para isso é usado o “-webkit-“ antes de “border-radius”, ficando “-webkit-border-radius”, como mostra a Listagem 7.
<style type="text/css">
#box{
/*definimos a largura do box*/
width:300px;
/* definimos a altura do box */
height:100px;
/* definimos a cor de fundo do box */
background-color:#6495ed;
/* definimos o quão arredondado irá ficar nosso box */
border-radius: 10px;
/* Declaração para aparecer no Firefox */
-moz-border-radius: 10px;
/* Para exibir nos outros navegadores como Chrome, safari, opera*/
-webkit-border-radius: 10px;
}
</style>Agora sabemos como arredondas cada canto de qualquer elemento HTML por meio de CSS3, de maneira muito mais fácil e mais leve do que com CSS. Um abraço e até o próximo artigo.
Espero que tenham gostado e até o próximo artigo.
