Bordas Arredondadas CSS3: Estilizando bordas

Neste artigo iremos aprender a criar elementos com bordas arredondadas por meio de CSS3. Iremos ver como é possível atribuir diferentes valores para diferentes 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.

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.


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.


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.


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.


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.

Artigos relacionados