Propriedades de fronteira CSS
As CSS border propriedades permitem especificar o estilo, a largura ea cor da borda de um elemento.
Este elemento tem uma borda sulco que é 15px de largura e verde.
Estilo de borda
O border-style propriedade especifica que tipo de borda a ser exibido.
Os seguintes valores são permitidos:
-
dotted- Define uma borda pontilhada -
dashed- Define uma borda tracejada -
solid- Define uma borda sólida -
double- Define uma margem dupla -
groove- Define uma borda sulcada 3D. O efeito depende do valor de fronteira-cor -
ridge- Define uma borda ridged 3D. O efeito depende do valor de fronteira-cor -
inset- Define uma borda de inserção 3D. O efeito depende do valor de fronteira-cor -
outset- Define uma borda início 3D. O efeito depende do valor de fronteira-cor -
none- Define nenhuma borda -
hidden- Define uma borda escondida
O border-style propriedade pode ter de um a quatro valores (para o limite superior, margem direita, borda inferior, e da fronteira esquerda).
Exemplo
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Resultado:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Tente você mesmo "  | Nota: Nenhum dos outros propriedades de fronteira CSS descritos abaixo terá qualquer efeito a menos que o border-style propriedade é definida! |
|---|
largura da borda
O border-width propriedade especifica a largura das quatro bordas.
A largura pode ser definido como um tamanho específico (em px, pt, cm, em , etc.) ou usando uma das três valores pré-definidos: fino, médio, ou espessura.
O border-width propriedade pode ter de um a quatro valores (para o limite superior, margem direita, borda inferior, e da fronteira esquerda).
Exemplo
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Tente você mesmo " Cor da borda
O border-color propriedade é usada para definir a cor das quatro bordas.
A cor pode ser definida por:
- name - especifique um nome de cor, como "red"
- Hex - especificar um valor hexadecimal, como "#ff0000"
- RGB - especificar um valor RGB, como "rgb(255,0,0)"
- transparent
O border-color propriedade pode ter de um a quatro valores (para o limite superior, margem direita, borda inferior, e da fronteira esquerda).
Se border-color não está definido, ele herda a cor do elemento.
Exemplo
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Tente você mesmo " Border - Sides individuais
A partir dos exemplos acima tenha visto que é possível especificar uma borda diferente para cada lado.
Em CSS, há também propriedades para especificar cada uma das fronteiras (topo, direita e inferior e esquerda):
Exemplo
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Tente você mesmo " O exemplo acima fornece o mesmo resultado como este:
Então, aqui está como funciona:
Se o border-style propriedade tem quatro valores:
- border-style : pontilhada dupla sólida tracejada;
- borda superior é pontilhada
- borda direita é sólido
- borda inferior é o dobro
- borda esquerda é tracejada
Se o border-style propriedade tem três valores:
- border-style : pontilhada dupla sólida;
- borda superior é pontilhada
- bordas direita e esquerda são sólidos
- borda inferior é o dobro
Se o border-style propriedade tem dois valores:
- border-style : sólida pontilhada;
- bordas superior e inferior são pontilhadas
- bordas direita e esquerda são sólidos
Se o border-style propriedade tem um valor:
- border-style : pontilhada;
- todas as quatro bordas são pontilhadas
O border-style propriedade é usada no exemplo acima. No entanto, ele também trabalha com border-width e border-color .
Border - Propriedade Taquigrafia
Como você pode ver nos exemplos acima, existem muitas propriedades a considerar quando se lida com fronteiras.
Para encurtar o código, também é possível especificar todas as propriedades da borda individuais em uma propriedade.
A border propriedade é um atalho para as seguintes propriedades de fronteira individuais:
-
border-width -
border-style(obrigatório) -
border-color
mais Exemplos
Todas as propriedades da borda superior em uma declaração
Este exemplo demonstra uma propriedade estenográfica para especificar todas as propriedades para a borda superior em uma declaração.
Defina o estilo da borda inferior
Este exemplo demonstra como definir o estilo da borda inferior.
Definir a largura da borda esquerda
Este exemplo demonstra como para definir a largura da fronteira esquerda.
Defina a cor das quatro bordas
Este exemplo demonstra como para definir a cor das quatro bordas. Ele pode ter de um a quatro cores.
Defina a cor da borda direita
Este exemplo demonstra como definir a cor da borda direita.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
Todas as propriedades da borda CSS
| Propriedade | Descrição |
|---|---|
| border | Define todas as propriedades de fronteira em uma declaração |
| border-bottom | Define todas as propriedades borda inferior em uma declaração |
| border-bottom-color | Define a cor da borda inferior |
| border-bottom-style | Define o estilo da borda inferior |
| border-bottom-width | Define a largura da borda inferior |
| border-color | Define a cor das quatro bordas |
| border-left | Define todas as propriedades da borda esquerda em uma declaração |
| border-left-color | Define a cor da borda esquerda |
| border-left-style | Define o estilo da borda esquerda |
| border-left-width | Define a largura da borda esquerda |
| border-right | Define todas as propriedades da borda direita em uma declaração |
| border-right-color | Define a cor da borda direita |
| border-right-style | Define o estilo da borda direita |
| border-right-width | Define a largura da borda direita |
| border-style | Define o estilo das quatro bordas |
| border-top | Define todas as propriedades da borda superior em uma declaração |
| border-top-color | Define a cor da borda superior |
| border-top-style | Define o estilo da borda superior |
| border-top-width | Define a largura da borda superior |
| border-width | Define a largura das quatro bordas |