CSS - Fronteiras
As propriedades da borda permitem que você especifique a aparência da borda da caixa que representa um elemento. Existem três propriedades de uma borda que você pode alterar -
o border-color especifica a cor de uma borda.
o border-style especifica se uma borda deve ser sólida, linha tracejada, linha dupla ou um dos outros valores possíveis.
o border-width especifica a largura de uma borda.
Agora, veremos como usar essas propriedades com exemplos.
A propriedade border-color
A propriedade border-color permite que você altere a cor da borda ao redor de um elemento. Você pode alterar individualmente a cor dos lados inferior, esquerdo, superior e direito da borda de um elemento usando as propriedades -
border-bottom-color muda a cor da borda inferior.
border-top-color muda a cor da borda superior.
border-left-color muda a cor da borda esquerda.
border-right-color muda a cor da borda direita.
O exemplo a seguir mostra o efeito de todas essas propriedades -
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade border-style
A propriedade border-style permite que você selecione um dos seguintes estilos de borda -
none- Sem fronteira. (Equivalente à largura da borda: 0;)
solid - Borda é uma única linha sólida.
dotted - A borda é uma série de pontos.
dashed - Borda é uma série de linhas curtas.
double - A borda é duas linhas sólidas.
groove - A borda parece estar gravada na página.
ridge - A borda parece o oposto do sulco.
inset - Borda faz com que a caixa pareça que está embutida na página.
outset - Borda faz com que a caixa pareça que está saindo da tela.
hidden - O mesmo que nenhum, exceto em termos de resolução de conflito de fronteira para os elementos da tabela.
Você pode alterar individualmente o estilo das bordas inferior, esquerda, superior e direita de um elemento usando as seguintes propriedades -
border-bottom-style muda o estilo da borda inferior.
border-top-style muda o estilo da borda superior.
border-left-style muda o estilo da borda esquerda.
border-right-style muda o estilo da borda direita.
O exemplo a seguir mostra todos esses estilos de borda -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
A propriedade border-width
A propriedade border-width permite que você defina a largura das bordas de um elemento. O valor desta propriedade pode ser um comprimento em px, pt ou cm ou deve ser definido como fino, médio ou grosso.
Você pode alterar individualmente a largura das bordas inferior, superior, esquerda e direita de um elemento usando as seguintes propriedades -
border-bottom-width altera a largura da borda inferior.
border-top-width altera a largura da borda superior.
border-left-width altera a largura da borda esquerda.
border-right-width altera a largura da borda direita.
O exemplo a seguir mostra todas essas larguras de borda -
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Propriedades da borda usando taquigrafia
A propriedade border permite que você especifique a cor, o estilo e a largura das linhas em uma propriedade -
O exemplo a seguir mostra como usar todas as três propriedades em uma única propriedade. Esta é a propriedade usada com mais frequência para definir a borda em torno de qualquer elemento.
<html>
<head>
</head>
<body>
<p style = "border:4px solid red;">
This example is showing shorthand property for border.
</p>
</body>
</html>Isso produzirá o seguinte resultado -