Artigos HTML e CSS HTML Básico: Aplicando efeitos CSS em bordas

As tabelas, assim como muitas propriedades html podem ser estilizadas por meio de CSS, e essa estilização pode ser feita para cada elemento e ela preferencialmente deve ser feita em um arquivo separado, nos exemplos a seguir irei usar o mesmo arquivo, fazendo a estilização inline, mas não é recomendável, lembre-se sempre de usar um arquivo .css separado e linkado dentro da tag , como explicado nesse artigo sobre Como criar um layout em duas colunas com HTML e CSS.

Nos exemplos a seguir irei mostrar como esses efeitos funcionam, para melhor aprendizado é aconselhável que você visualize o efeito e a regra utilizada, além de reproduzir o tutorial em seu editor html, testando com diversas variações e vendo o que acontece no seu navegador.

Vamos ver agora como podemos aplicar efeitos CSS em bordas em HTML.


<!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>Trabalhando com Bordas</title>
<style type="text/css">
h3 {
border-width: medium;
border-style: solid;
border-color: #F00;
    }
p   {
border-width: 3px;
border-style: dashed;
border-color: #0F0;
    }
</style>
</head>

<body>



<h3>Borda média, contínua e vermelha</h3>
<p>Borda 3px, tracejada e verde</p>


</body>
</html>
Listagem 1. Border-width, border-style e border-color

O resultado do código pode ser visto a seguir:

img
Figura 1. Exemplo Border-width, border-style e border-color

Abaixo iremos ver os exemplos com as propriedades border-style


<!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>Trabalhando com Bordas</title>

</head>

<body>

<p style="border-style:solid; margin:20px;">Borda solid</p >
<p style="border-style:dotted; margin:20px;">Borda dotted</p>
  <p  style="border-style:dashed; margin:20px;">Borda dashed</p >  
  <p style="border-style:double; margin:20px;">Borda double</p >
  <p  style="border-style:groove; margin:20px;">Borda groove</p >
  <p  style="border-style:ridge; margin:20px;">Borda ridge</p >
  <p style="border-style:inset; margin:20px;">Borda inset</p >
  <p  style="border-style:outset; margin:20px;">Borda outset</p >


</body>
</html>
Listagem 2. Usando border-style

O código acima ficará da seguinte forma:

img
Figura 2. Usando border-style

Também podemos definir larguras para as bordas, e definindo individualmente para cada uma das bordas, abaixo irei mostrar um exemplo:


<!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>Trabalhando com Bordas</title>
<style type="text/css">
p    {
border-style: solid;
border-bottom-width: 20px;
border-top-width: 10px;
border-right-width: 2px;
border-left-width: 5px;
 }
</style>
</head>

<body>

<p>Borda com espessura inferior de 20px, superior de 10px, da esqueda de 5px e da direita de 2px</p>


</body>
</html>
Listagem 3. border-width

O exemplo acima ficará dessa forma :

img
Figura 3. Border-width

É altamente recomendável por questões de otimização do site que você use as propriedades CSS abreviadas, fazendo assim com que ela demore menos tempo para carregar e fique em um padrão melhor e mais bonito também.

Dessa forma você pode declarar todas as 3 propriedades das bordas em uma única instância, obedecendo sempre a sintaxe padrão, que é border: size style color;, procure sempre usar a mesma ordem como padrão, para facilitar você e outra pessoa que vá atualizar o código futuramente.


<!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>Trabalhando com Bordas</title>
<head>
<style type="text/css">
p     {
border: thick  groove  #3F0;
    }
</style>
</head>
<body>
<p>Bordas em declaração única</p>



</body>
</html>
Listagem 4. Declarando todas as propriedades e uma única instância

O resultado desse código deverá ficar assim:

img
Figura 4. Exemplo das Bordas

Espero que tenham gostado e entendido como funcionam as propriedades das bordas em html, como pudemos ver é possível estilizar de diversas formas diferentes, vai da sua necessidade e sua criatividade.

Fiquem à vontade em testar com exemplos próprios exemplos e deixem a criatividade fluir, qualquer dúvida fique a vontade de perguntar nos comentários.

Confira também

Curso de HTML Básico

Curso de HTML Básico

Curso
Introdução ao CSS na prática

Introdução ao CSS na prática

Curso
Cursos de HTML e CSS

Cursos de HTML e CSS

Cursos