Propriedades das bordas no html

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Neste artigo iremos aprender as propriedades que podemos usar nas bordas.

Olá pessoal, 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:
    1. código hexadecimal: #FFFFFF
    2. código rgb: rgb(255,235,0)
    3. nome da cor: red, blue, green...etc
  • style:
    1. none: nenhuma borda
    2. hidden: equivalente a none
    3. dotted: borda pontilhada
    4. dashed: borda tracejada
    5. solid: borda contínua
    6. double: borda dupla
    7. groove: borda entalhada
    8. ridge: borda em ressalto
    9. inset: borda em baixo relevo
    10. outset: borda em alto relevo
  • width:
    1. thin: borda fina
    2. medium: borda média
    3. thick: borda grossa
    4. 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. Um abraço e até a próxima.

Espero que tenham gostado e até o próximo artigo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?