activeinfo
 

Curso de HTML com CSS.


Bordas com CSS.

A estilização de bordas com CSS é rica em alternativas que tornam as páginas web muito mais atraentes.

Bordas são propriedades que podem ser definidas para todos os elementos HTML.

O uso mais comum é em elementos div e em tabelas.

Nesta lição aprenderemos os diversos tipos de bordas com exemplos ilustrativos.

Propriedades definidas para bordas não terão nenhum efeito se antes não for definido seu estilo, através da propriedade border-style.

Propriedade border-style - Estilo da borda

Como comentado acima, a primeira definição para definir formatações especiais em bordas é o estilo das mesmas.

Vejamos quais são os possíveis estilos para bordas nesta página de exemplo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade border-style em CSS</title>
  </head>
  <body>
    <h3>
      Exemplos da propriedade border-style.
    </h3>
    <p style="border-style: dotted;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: dotted</strong>, que cria
      uma borda com pontos.
    </p>
    <p style="border-style: dashed;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: dashed</strong>, que cria
      uma borda com traços.
    </p>
    <p style="border-style: solid;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: solid</strong>, que cria
      uma borda sólida.
    </p>
    <p style="border-style: double;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: double</strong>, que cria
      uma borda dupla.
    </p>
    <p style="border-style: groove;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: groove</strong>, que cria
      um efeito na borda.
    </p>
    <p style="border-style: ridge;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: ridge</strong>, que cria
      um efeito na borda.
    </p>
    <p style="border-style: inset;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: inset</strong>, que cria
      um efeito 3D na borda.
    </p>
    <p style="border-style: outset;">
      Este parágrafo foi definido com uma propriedade
      <strong>border-style: outset</strong>, que cria
      um efeito 3D na borda.
    </p>
  </body>
</html>

Visualizando o resultado:

border-style em CSS

A página acima é auto-explicativa e mostra a aparência dos diversos estilos que podem ser aplicados em bordas.

Proprieade border-color - Cor da borda

Após ter definido o estilo da borda é possível definir também uma cor para a mesma.

Se você quiser aplicar cores personalizadas em suas páginas veja a lição Tabela de Cores em HTML.

Vejamos um exemplo na página abaixo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade border-color em CSS</title>
  </head>
  <body>
    <h3>
      Exemplos da propriedade border-color.
    </h3>
    <p style="border-style: dotted; border-color: blue;">
      Definição de uma propriedade
      <strong>border-style: dotted</strong>, que cria
      uma borda com pontos e a cor <strong>blue</strong>.
    </p>
    <p style="border-style: dashed; border-color: green;">
      Definição de uma propriedade
      <strong>border-style: dashed</strong>, que cria
      uma borda com traços e a cor <strong>green</strong>.
    </p>
    <p style="border-style: solid; border-color: red;">
      Definição de uma propriedade
      <strong>border-style: solid</strong>, que cria
      uma borda com sólida e a cor <strong>red</strong>.
    </p>
    <p style="border-style: double; border-color: orange;">
      Definição de uma propriedade
      <strong>border-style: double</strong>, que cria
      uma borda dupla e a cor <strong>orange</strong>.
    </p>
    <p style="border-style: groove; border-color: violet;">
      Definição de uma propriedade
      <strong>border-style: groove</strong>, que cria
      um efeito na borda e a cor <strong>violet</strong>.
    </p>
    <p style="border-style: ridge; border-color: teal;">
      Definição de uma propriedade
      <strong>border-style: ridge</strong>, que cria
      um efeito na borda e a cor <strong>teal</strong>.
    </p>
    <p style="border-style: inset; border-color: maroon;">
      Definição de uma propriedade
      <strong>border-style: inset</strong>, que cria
      um efeito 3D na borda e a cor <strong>maroon</strong>.
    </p>
    <p style="border-style: outset; border-color: salmon;">
      Definição de uma propriedade
      <strong>border-style: outset</strong>, que cria
      um efeito 3D na borda e a cor <strong>salmon</strong>.
    </p>
  </body>
</html>

Visualizando o resultado:

border-color em CSS

Propriedade border-width - Largura da borda

Para definir a largura de bordas utiliza-se a propriedade border-width, sendo mais utilizados os valores:

Vejamos uma página que mostra esses valores na prática:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade border-width em CSS</title>
  </head>
  <body>
    <h3>
      Propriedade border-width.
    </h3>
    <div style="font-size: small; font-family: 'Lucida Console', Monaco, monospace">
      <p style="border-style: dotted; border-color: blue; border-width: 1px;">
        border-style: dotted<br />
        border-color: blue<br />
        <strong>border-width: 1px</strong>
      </p>
      <p style="border-style: dashed; border-color: green; border-width: 2px;">
        border-style: dashed<br />
        border-color: green<br />
        <strong>border-width: 2px</strong>
      </p>
      <p style="border-style: solid; border-color: red; border-width: thin;">
        border-style: solid<br />
        border-color: red<br />
        <strong>border-width: thin</strong>
      </p>
      <p style="border-style: double; border-color: orange; border-width: medium;">
        border-style: double<br />
        border-color: orange<br />
        <strong>border-width: medium</strong>
      </p>
      <p style="border-style: groove; border-color: violet; border-width: thick;">
        border-style: groove<br />
        border-color: violet<br />
        <strong>border-width: thick</strong>
      </p>
      <p style="border-style: ridge; border-color: teal; border-width: 7px;">
        border-style: ridge<br />
        border-color: teal<br />
        <strong>border-width: 5px</strong>
      </p>
      <p style="border-style: inset; border-color: maroon; border-width: 8px;">
        border-style: inset<br />
        border-color: maroon<br />
        <strong>border-width: 6px</strong>
      </p>
      <p style="border-style: outset; border-color: salmon; border-width: 9px;">
        border-style: outset<br />
        border-color: salmon<br />
        <strong>border-width: 7px</strong>
      </p>
    </div>
  </body>
</html>

Visualizando o resultado:

border-width em CSS

Valores individuais para bordas

Toda borda tem 4 lados: o de cima (border-top), o da direita (border-right), o de baixo (border-bottom) e o da esquerda (border-left).

É possível definir estilos para cada um dos lados das bordas, com os valores:

Veja o exemplo da página abaixo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Estilos em lados de bordas em CSS</title>
    <style type="text/css">
      p.quatro_estilos {
        border-top-style: dotted;
        border-right-style: dashed;
        border-bottom-style: solid;
        border-left-style: double;
        border-width: 4px;
      }
    </style>
  </head>
  <body>
    <h3>Estilos nos lados da borda.</h3>
    <p class="quatro_estilos">
      border-top-style: dotted;<br />
      border-right-style: dashed;<br />
      border-bottom-style: solid;<br />
      border-left-style: double;<br />
      border-width: 4px;
    </p>
  </body>
</html>

Visualizando a página.

bordas com lados distintos

Também é possível definir estilos para os lados de bordas em uma só linha, como no exemplo abaixo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Estilos em lados de bordas em CSS</title>
  </head>
  <body>
    <h3>Estilos nos lados da borda.</h3>
    <p style="border-style: dotted dashed solid double">
      border-top-style: dotted;<br />
      border-right-style: dashed;<br />
      border-bottom-style: solid;<br />
      border-left-style: double;<br />
      border-width: 4px;
    </p>
  </body>
</html>

Visualizando a página:

bordas inline

Para definir diversos estilos em uma única propriedade existe uma regra que define a sequência dos lados afetados:

bordas inline

A mesma regra se aplica para outros estilos, como no caso da cor da fonte, que também pode ser definida em uma só linha:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Cores em lados de bordas em CSS</title>
    <style type="text/css">
      p {
        font-size: 18px;
        font-weight: bolder;
        border-style: solid;
        border-width: 5px;
        border-color: red green blue orange;
      }
    </style>
  </head>
  <body>
    <h3>Cores diferentes nos lados da borda.</h3>
    <p>
      border-style: red green blue orange
    </p>
  </body>
</html>

Visualizando o resultado:

bordas inline

Também é possível definir valores em uma só linha somente para alguns lados, seguindo as regras mostradas no exemplo abaixo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Regras para estilos inline em bordas</title>
    <style type="text/css">
      p {
        font-size: 16px;
        border-style: solid;
        border-width: 5px;
      }
    </style>
  </head>
  <body>
    <h3>Regras para lados em bordas.</h3>
    <p style="border-color: green blue orange red">
      Neste parágrafo foi definido:
      <strong>border-color: green blue orange red</strong>, portanto:
    </p>
    <ul>
      <li>A borda de cima será verde</li>
      <li>A borda da direita será azul</li>
      <li>A borda de baixo será laranja</li>
      <li>A borda da esquerda será vermelha</li>
    </ul>
    <p style="border-color: green blue orange">
      Neste parágrafo foi definido:
      <strong>border-color: green blue orange</strong>,
      portanto:
    </p>
    <ul>
      <li>A borda de cima será verde</li>
      <li>As bordas da direita e da esquerda serão azuis</li>
      <li>A borda de baixo será laranja</li>
    </ul>
    <p style="border-color: green blue">
      Neste parágrafo foi definido:
      <strong>border-color: green blue</strong>,
      portanto:
    </p>
    <ul>
      <li>As bordas de cima e de baixo serão verdes</li>
      <li>As bordas da direita e da esquerda serão azuis</li>
    </ul>
    <p style="border-color: green">
      Neste parágrafo foi definido:
      <strong>border-color: green</strong>,
      portanto:
    </p>
    <ul>
      <li>Todas as bordas serão verdes</li>
    </ul>
  </body>
</html>

Visualizando o resultado:

regras bordas inline em CSS

Propriedade border - Estilo da borda

Vimos acima algumas variações para definição de estilos em bordas, inclusive definindo estilos para lados específicos das mesmas.

Mas existe um atalho no qual é possível determinar vários estilos em uma só linha para bordas.

Veja o trecho de código CSS abaixo:

p { border: 1px solid green }

Para um mesmo elemento parágrafo (p) foram definidos três estilos:

Vejamos um exemplo de código:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Estilos em uma só linha para bordas em CSS</title>
    <style type="text/css">
      p { border: 2px dotted blue }
      h4 { border: solid green }
      h5 { border: 8px groove orange }
    </style>
  </head>
  <body>
    <h3>Estilos em bordas em uma só linha.</h3>
    <p>
      border: 2px dotted blue
    </p>
    <h4>
      border: solid green
    </h4>
    <h5>
      border: 8px groove orange
    </h5>
  </body>
</html>

Visualizando o resultado:

regras bordas inline em CSS

Note que para o elemento h4 foi definido um estilo solid e uma cor green mas não foi definida uma largura (width).

Para definir valores para propriedades em uma só linha o único elemento obrigatório é o estilo. No caso, como foi definido como solid a cor pôde ser aplicada e a largura foi definida com o valor padrão (medium).

Resumo dos estilos em bordas

Abaixo vemos uma tabela mostrando as possíveis propriedades utilizadas em bordas.

Propriedade Exemplo Descrição
border 1px solid black define vários estilos em uma só linha
border-top 2px dotted green define estilos para a parte superior da borda
border-right 3px groove blue define estilos para a parte direita da borda
border-bottom dashed orange define estilos para a parte inferior da borda
border-left 2px double yellow define estilos para a parte esquerda da borda
border-top-style solid define o estilo sólido para a borda superior
border-top-color green define a cor verde para a borda superior
border-top-width 3px define uma largura para a borda superior
border-right-style outset define um estilo para a borda direita
border-right-color blue define a cor azul para a borda direita
border-right-width 1px define uma largura para a borda direita
border-bottom-style inset define um estilo para a borda inferior
border-bottom-color red define uma cor vermelha para a borda inferior
border-bottom-width thin define uma largura para a borda inferior
border-left-style dashed define um estilo para a borda esquerda
border-left-color green define uma cor verde para a borda esquerda
border-left-width thick define uma largura para a borda esquerda

Existe ainda a propriedade border-collapse, utilizada em tabelas. Essa propriedade será abordada na lição "Tabelas com CSS".

Voltar Próximo: Listas com CSS