Artigos HTML e CSS Bordas Arredondadas CSS3: Estilizando bordas

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.

saiba mais 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>
Listagem 1. Código completo

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>
Listagem 2. Propriedade border-radius

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.

Bordas com 10px de arredondamento
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>
Listagem 3. border-radius: 10px 20px;

O exemplo anterior ficará da mesma forma que apresentado na Figura 2.

border-radius: 10px 20px 30px;
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>
Listagem 4. border-radius: 10px 20px 30px;

O exemplo da Listagem 4 ficará como na Figura 3.

border-radius: 10px 20px 30px;
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>
Listagem 5. border-radius: 10px 20px 30px 40px;

O exemplo da Listagem 5 ficará como na Figura 4.

border-radius: 10px 20px 30px 40px;
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>
Listagem 6. Exibindo no Firefox também

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>
Listagem 7. : Exibindo em todos os navegadores

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.