Borda de Todos os Lados do CSS

Borda CSS - Borda isolada

Do exemplo do capítulo anterior, você já viu que pode especificar diferentes bordas para cada lado.

No CSS, há algumas propriedades que podem ser usadas para especificar cada borda (superior, direita, inferior e esquerda):

Exemplo

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Resultados:

Diferentes estilos de borda

Experimente você mesmo

Diferentes estilos de borda

O resultado do exemplo acima é o mesmo:

Exemplo

p {
  border-style: dotted solid;
}

Experimente você mesmo

Seu princípio de funcionamento é assim:

Se border-style O ajuste de propriedades tem quatro valores:

border-style: dotted solid double dashed;

  • A borda superior é pontilhada
  • A borda direita é sólida
  • A borda inferior é dupla
  • A borda esquerda é pontilhada

Se border-style O ajuste de propriedades tem três valores:

border-style: dotted solid double;

  • A borda superior é pontilhada
  • a borda direita e esquerda são linhas sólidas
  • A borda inferior é dupla

Se border-style A propriedade define dois valores:

border-style: dotted solid;

  • a borda superior e inferior são traços
  • a borda direita e esquerda são linhas sólidas

Se border-style A propriedade define um valor:

border-style: dotted;

  • Todas as quatro laterais são traços

Exemplo

/* Quatro valores */
p {
  border-style: dotted solid double dashed; 
}
/* Três valores */
p {
  border-style: dotted solid double; 
}
/* Dois valores */
p {
  border-style: dotted solid; 
}
/* Um valor */
p {
  border-style: dotted; 
}

Experimente você mesmo

No exemplo acima, usamos border-style A propriedade, mas border-width e border-color Também se aplica.