Border CSS (Borders)
propriedades de fronteira CSS
propriedades de fronteira CSS permitem que você especifique o estilo de borda de um elemento e cor.
Estilo border
propriedade estilo de borda especifica que tipo de borda a ser exibido.
propriedadeborder-style é utilizada para definir o estilo da fronteira
valor border-style:
Nenhum: Nenhuma borda padrão
pontilhada: pontilhada: Define uma marquise
frustradas: Define uma caixa tracejada
sólida: a definição de borda sólida
duplo: definir dois limites. Os mesmos valores da largura de duas fronteiras e border-width de
sulco: sulco definido borda 3D. O efeito depende dos valores de cor do limite
cume: a fronteira cume 3D definição. O efeito depende dos valores de cor do limite
Detalhe: Define uma borda 3D incorporado. O efeito depende dos valores de cor do limite
início: Define uma borda início 3D. O efeito depende dos valores de cor do limite
Tente: definir o estilo de borda
largura da borda
Você pode especificar a largura da borda pelo atributo border-width.
Especifica a largura para a borda de duas maneiras: Você pode especificar o comprimento do valor, como 2px ou 0.1em; ou usar uma das três palavras-chave, que são finas, médias (padrão) e grosso.
Nota: CSS não definir três palavras-chave largura específica, de modo que um agente usuário pode ser o fino, médio e grosso, respectivamente igual a 5px, 3px, e 2px, enquanto outro agente do usuário, respectivamente, definido como 3px, 2px e 1px.
Exemplos
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
tente »
Cor da margem
propriedade border-color define a cor da borda. Você pode definir a cor:
- nome - Especifica o nome da cor, tal como "vermelho"
- RGB - especificar um valor RGB, como "rgb (255,0,0)"
- Hex - Especifica o valor hexadecimal, como "# ff0000"
Você também pode definir a cor da borda para "transparente".
Nota: border-color por si só não funciona, você deve ter para usar o estilo de borda para definir o estilo de borda.
Exemplos
{
border-style: sólida;
border-color: red;
}
p.two
{
border-style: sólida;
border-color: # 98bf21;
}
tente »
Border - configurações separadas para cada lado
Em CSS, você pode especificar diferentes lados diferentes fronteiras:
Exemplos
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
tente »
O exemplo acima também pode definir um único atributo:
propriedade border-style pode ter um a quatro valores:
- border-style: pontilhada dupla sólida frustradas ;
- As fronteiras são pontilhadas
- borda direita é sólido
- A borda inferior dupla
- borda esquerda é tracejada
- border-style: pontilhada dupla sólida;
- As fronteiras são pontilhadas
- Esquerda e margem direita é sólido
- A borda inferior dupla
- border-style: sólida pontilhada;
- Na parte inferior é borda pontilhada
- bordas direita e esquerda são sólidos
- border-style: pontilhada;
- Cercado por uma beira pontilhada
O exemplo acima usa o estilo de borda. No entanto, ele também pode ser border-width, border-color juntos.
Border - propriedade estenográfica
O exemplo acima usa um monte de propriedade para definir a fronteira.
T Você também pode definir a fronteira em uma propriedade.
Você pode atributo "border" set:
- border-width
- border-style (obrigatório)
- border-color
mais exemplos
Todas as propriedades da borda em uma declaração sendo
Este exemplo demonstra uma propriedade estenográfica para configurar todas as quatro propriedades de fronteira na mesma instrução.
estilo de borda Configurar
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. Você pode definir um a quatro cores.
Defina a cor da borda direita
Este exemplo demonstra como definir a cor da borda direita.
propriedades de fronteira CSS
| propriedade | descrição |
|---|---|
| fronteira | propriedade estenográfica usado para definir a propriedade de um dos quatro lados em um comunicado. |
| border-style | Ele é usado para definir o estilo de borda de todos os elementos, ou separadamente definir o estilo de borda para cada lado. |
| border-width | Tudo fronteira propriedade estenográfica define a largura do elemento, ou definir individualmente a largura para cada lado da fronteira. |
| border-color | propriedade estenográfica, o elemento de toda a parte fronteira cores visíveis, ou definir a cor, respectivamente quatro lados. |
| border-bottom | propriedade estenográfica usada para definir todos os atributos da fronteira com um comunicado. |
| border-bottom-color | Defina a cor da borda inferior do elemento. |
| border-bottom-style | Definir os elementos de estilo fronteira. |
| border-bottom-width | Definir a largura da borda inferior do elemento. |
| border-left | propriedade estenográfica usado para definir todas as propriedades da borda esquerda para um comunicado. |
| border-left-color | Defina a cor do elemento borda esquerda. |
| border-left-style | O elemento do estilo de borda esquerda. |
| border-left-width | O elemento da largura da borda esquerda. |
| border-right | atalho para definir todas as propriedades para a direita da caixa com um comunicado. |
| border-right-color | Defina a cor do elemento borda direita. |
| Border-style-direita | O elemento dos estilos borda direita. |
| -Width border-right | Definir a largura do elemento de borda direita. |
| border-top | atalho para definir todas as propriedades na fronteira com um comunicado. |
| border-top-color | Elemento é definido na cor da borda. |
| border-top-style | Elemento é definido no estilo de borda. |
| border-top-width | Elemento é definido na largura da borda. |