No CSS, existem dois tipos diferentes de bordas, border e outline. Enquanto border sempre representa uma borda retangular, as bordas outline introduzidas no CSS2 são destinadas a áreas não retangulares. E ainda há uma diferença: com outline, a moldura ocorre fora da borda, permitindo que um elemento tenha tanto uma borda com border quanto uma moldura com outline atribuídas a ele.
As definições de borda apresentadas neste tutorial são especialmente interessantes para elementos que formam um parágrafo próprio. Em princípio, elas também podem ser aplicadas a outros elementos.
Definindo bordas
Com border, é possível determinar a aparência da borda ao redor de um elemento.
A propriedade border geral é uma recapitulação dos seguintes valores, que serão abordados de forma mais detalhada:
• border-color
• border-style
• border-width
Os valores para as propriedades individuais são separados por espaços em branco. A ordem em que as propriedades são declaradas não importa. Além disso, existem quatro subpropriedades de border, que permitem especificar cores, larguras de borda e tipos de borda para os lados individuais dos elementos.
• border-top – borda superior
• border-right – borda direita
• border-bottom – borda inferior
• border-left – borda esquerda
O exemplo a seguir demonstra o uso de border. Com essa definição, uma borda preta de três pontos de largura e pontilhada é criada.
<p style="border:3pt solid #000000;"> Bem-vindo </p>
O resultado no navegador:
A cor da borda
A cor da borda é determinada por border-color. Os seguintes valores são permitidos:
• transparent – borda transparente
• Valor de cor
Se apenas um valor for fornecido, ele será válido para todas as bordas. Para definir cores diferentes para cada lado, vários valores devem ser especificados, separados por espaços em branco.
• Dois valores – o primeiro valor para a cor das bordas superior e inferior, o segundo para a cor das bordas esquerda e direita.
• Três valores – o primeiro valor para a cor da borda superior, o segundo para as bordas esquerda e direita, o terceiro para a cor da borda inferior.
• Quatro valores – primeiro valor para a borda superior, segundo para a borda direita, terceiro para a borda inferior e quarto para a borda esquerda.
Da mesma forma, as seguintes subpropriedades de borda podem ser usadas:
• border-top-color – cor da borda superior
• border-right-color – cor da borda direita
• border-bottom-color – cor da borda inferior
• border-left-color – cor da borda esquerda
Um exemplo:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
E aqui está o resultado no navegador:
O tipo de linha
O tipo de linha da borda pode ser definido com border-style. Abaixo está a lista de possíveis variações de linha:
• none – linha invisível
• dotted – pontilhada
• dashed – tracejada
• solid – contínua
• double – dupla
• groove – linha 3D
• ridge – linha 3D
• inset – linha 3D
• outset – linha 3D
Aqui está um exemplo de como os diferentes tipos de linha ficam:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>O resultado no navegador:
Se somente um valor for fornecido, ele será válido para todos os lados da borda. Para definir tipos de linha diferentes para cada lado, basta especificar vários valores, separados por espaços em branco.
• Dois valores – o primeiro valor para o tipo de linha das bordas superior e inferior, o segundo para o tipo de linha das bordas esquerda e direita.
• Três valores – o primeiro valor para o tipo de linha da borda superior, o segundo para as bordas esquerda e direita, o terceiro para o tipo de linha da borda inferior.
• Quatro valores – primeiro valor para a linha superior, segundo para a linha direita, terceiro para a linha inferior e quarto para a linha esquerda.
Da mesma forma, as seguintes subpropriedades de border podem ser usadas:
• border-top-style – tipo de linha da borda superior
• border-right-style – tipo de linha da borda direita
• border-bottom-style – tipo de linha da borda inferior
• border-left-style – tipo de linha da borda esquerda
Também aqui está um exemplo:
<p style="border-bottom-style: dashed;"> Moldura pontilhada </p>
E assim aparece no navegador:
Definindo a largura da moldura
A largura da moldura é determinada por border-width.
• Indicação de comprimento
• thin – moldura fina
• medium – moldura de espessura média
• thick – moldura espessa
Se for fornecido apenas um valor, ele se aplica a todas as partes do elemento. Para definir espessuras de moldura diferentes para cada lado do elemento, existem duas possibilidades. Na primeira opção, você anota vários valores separados por espaços.
• Dois valores – o primeiro valor para a espessura superior e inferior, o segundo para a espessura esquerda e direita.
• Três valores – o primeiro valor para a espessura superior, o segundo para a espessura esquerda e direita, o terceiro para a espessura inferior.
• Quatro valores – primeiro valor para cima, segundo para a direita, terceiro para baixo e quarto para a espessura esquerda.
Da mesma forma, você também pode usar as seguintes subpropriedades de borda:
• border-top-width – Espessura da borda superior
• border-right-width – Espessura da borda direita
• border-bottom-width – Espessura da borda inferior
• border-left-width – Espessura da borda esquerda
Um exemplo:
<p style="border-width:2px;border-style: dotted;"> Bem-vindo </p>
Definindo a cor da moldura para outline
A cor da moldura é definida através da propriedade outline-color. A especificação é idêntica a border-color.
• invert – uma cor é invertida. Esta cor é criada invertendo todos os bits de um valor de cor hexadecimal.
• Especificação de cor
Um exemplo:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Assim é exibido no navegador:
O tipo de moldura para outline
A propriedade outline-style determina o tipo de contorno. São permitidos os mesmos valores de border-style.
• none – moldura invisível
• dotted – pontilhada
• dashed – tracejada
• solid – contínua
• double – dupla
• groove – linha 3D
• ridge – linha 3D
• inset – linha 3D
• outset – linha 3D
Um exemplo:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
A espessura da moldura para outline
A propriedade outline-width é idêntica a border-width. Aqui também é onde a espessura da moldura é definida. Para criar uma linha de moldura visível, sempre combine outline-width com outline-style.
• medium – moldura de espessura média
• thin – moldura fina
• thick – moldura espessa
• Indicação de comprimento – determina a espessura da moldura
Um exemplo:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Bem-vindo
</p>
E assim como na borda, há também uma propriedade geral para molduras de outline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Bem-vindo ao PSD-Tutorials.de!</p>
</body>
</html>
Isso então resume as seguintes propriedades:
• outline-width
• outline-style
• outline-color
O princípio aqui é idêntico ao da propriedade geral de border.
