Borda do CSS

Propriedade de borda CSS

CSS border A propriedade permite que você especifique o estilo, largura e cor da borda do elemento.

Todas as minhas bordas têm borda.

Tenho uma borda inferior vermelha.

Tenho borda arredondada.

Tenho uma borda esquerda azul.

Estilo de borda CSS

border-style A propriedade especifica o tipo de borda a ser exibida.

Permite os seguintes valores:

  • dotted - Definir borda de linha pontilhada
  • dashed - Definir borda de linha pontilhada
  • solid - Definir borda de linha sólida
  • double - Definir borda dupla
  • groove - Definir borda 3D sulco. O efeito depende do valor de border-color
  • ridge - Definir borda 3D riboa. O efeito depende do valor de border-color
  • inset - Definir borda 3D inset. O efeito depende do valor de border-color
  • outset - Definir borda 3D outset. O efeito depende do valor de border-color
  • none - Definir borda sem borda
  • hidden - Definir borda oculta

border-style A propriedade pode definir um a quatro valores (usados para a borda superior, direita, inferior e esquerda).

Exemplo

Demonstra diferentes estilos de borda:

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;}

Resultados:

Borda de ponto.

Borda de linha pontilhada.

Borda de linha sólida.

Borda de linha dupla.

Borda cavada. Seu efeito depende do valor de border-color.

Borda ondulada. Seu efeito depende do valor de border-color.

Borda 3D inset. Seu efeito depende do valor de border-color.

Borda 3D outset. Seu efeito depende do valor de border-color.

Borda sem borda.

Borda oculta.

Borda misturada.

Experimente você mesmo

Atenção:A menos que seja configurado border-style Atributo, senão outras propriedades de borda CSS (serão detalhadas no próximo capítulo) não terão qualquer efeito!