Bordas

Propriedades de Bordas

A propriedade border permite especificar o estilo, espessura, e cor das bordas de um elemento.

Estilo de Bordas

A propriedade border-style especifica que tipo de borda exibir.

São permitidos os seguintes valores:

• dotted - Define uma borda pontilhada
• dashed - Define uma borda tracejada
• solid - Define uma borda sólida
• double - Define uma borda dupla
• none - Sem bordas
• hidden - Bordas ocultas

A propriedade border-style pode ter até quatro valores (borda superior, direita, inferior, e esquerda).

              p.pontilhada {
                border-style: dotted;
              }
              
              
              p.tracejada {
                border-style: dashed;
              }
              
              
              p.solida {
                border-style: solid;
              }
              

              p.dupla {
                border-style: double;
              }
              

              p.none {
                border-style: none;
              }
              
              
              p.oculta {
                border-style: hidden;
              }
               

              p.mix {
                border-style: dotted dashed solid double;
              }
            

Resultado:

Espessura de Bordas

A propriedade border-width especifica a espessura das quatro bordas.

A espessura pode ser definida com um tamanho específico (com px, pt, cm, em, etc) ou utilizando um valor pré-definido: thin, medium ou thick.

A propriedade border-width pode ter até quatro valores (borda superior, direita, inferior, e esquerda).

              p.um {
                border-style: solid;
                border-width: 5px;
              }
              
              
              p.dois {
                border-style: solid;
                border-width: medium;
              }
              
              
              p.tres {
                border-style: solid;
                border-width: 2px 10px 4px 20px;
              }
              
            

Cor de Bordas

A propriedade border-color é utilizada para definir a cor das quatro bordas.

A cor pode ser definida por:

• Nome - especifica-se o nome da cor, por exemplo red
• Hex - especifica-se um valor hexadecimal, por exemplo #FF0000
• RGB - especifica-se um valor RGB, por exemplo rgb(255,0,0)

A propriedade border-color pode ter até quatro cores (borda superior, direita, inferior, e esquerda).

Se não for especificada, border-color recebe a cor do elemento.

              p.um {
                border-style: solid;
                border-color: red;
              }
              
              
              p.dois {
                border-style: solid;
                border-color: green;
              }
              
              
              p.tres {
                border-style: solid;
                border-color: red green blue yellow;
              }