Nesse artigo irei falar sobre a propriedade border do HTML, essa propriedade é responsável por adicionar bordas em qualquer elemento HTML, seja ele uma div, uma imagem, um box, ou seja, qualquer elemento. Abaixo irei listas suas principais propriedades do atributo border.

  • border-width: espessura da borda
  • border-style: estilo da borda
  • border-color: cor da borda
  • border-top-width: espessura da borda superior
  • border-top-style: estilo da borda superior
  • border-top-color: cor da borda superior
  • border-right-width: espessura da borda direita
  • border-right-style: estilo da borda direita
  • border-right-color: cor da borda direita
  • border-bottom-width: espessura da borda inferior
  • border-bottom-style: estilo da borda inferior
  • border-bottom-color: cor da borda inferior
  • border-left-width: espessura da borda esquerda
  • border-left-style: estilo da borda esquerda
  • border-left-color: cor da borda esquerda
  • border-top: maneira abreviada para todas as propriedades da borda superior
  • border-right: maneira abreviada para todas as propriedades da borda direita
  • border-bottom: maneira abreviada para todas as propriedades da borda inferior
  • border-left: maneira abreviada para todas as propriedades da borda esquerda
  • border: maneira abreviada para todas as quatro bordas

Algumas propriedades só aceitam valores específicos, ou seja, temos que respeitar os valores delas ao passar um parâmetro à ela, esses valores estão listados abaixo:

  • color:
    • código hexadecimal: #FFFFFF
    • código rgb: rgb(255,235,0)
    • nome da cor: red, blue, green...etc
  • style:
    • none: nenhuma borda
    • hidden: equivalente a none
    • dotted: borda pontilhada
    • dashed: borda tracejada
    • solid: borda contínua
    • double: borda dupla
    • groove: borda entalhada
    • ridge: borda em ressalto
    • inset: borda em baixo relevo
    • outset: borda em alto relevo
  • width:
    • thin: borda fina
    • medium: borda média
    • thick: borda grossa
    • length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Hoje mostrei algumas propriedades que podemos usar nas bordas, e um próximo artigo irei mostrar alguns exemplos de como essas propriedades ficam na prática.

Confira também