Bordas CSS

As propriedades da borda CSS permitem que você especifique o estilo, a largura e a cor da borda de um elemento.

Estilo de borda (Border Style)

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

Os seguintes valores são permitidos:

• dotted - Define uma borda pontilhada
• dashed - Define uma borda tracejada
• solid - Define uma borda sólida
• double - Define uma borda dupla
• groove - Define uma borda ranhurada 3D. O efeito depende do valor da cor da borda
• ridge - Define uma borda 3D estriada. O efeito depende do valor da cor da borda
• inset - Define uma borda de inserção 3D. O efeito depende do valor da cor da borda
• outset - Define uma borda inicial 3D. O efeito depende do valor da cor da borda
• none - Não define borda
• hidden - Define uma borda oculta

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

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

Nota: Nenhuma das outras propriedades de borda CSS terá qualquer efeito a menos que a border-style propriedade seja definida!

Largura da borda (Border Width)

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

A largura pode ser definida como um tamanho específico (em px, pt, cm, em, etc) ou usando um dos três valores predefinidos: fino, médio ou grosso.

                                
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}
                            

Larguras Laterais Específicas

A border-width propriedade pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e borda esquerda):

                                    
p.one {
    border-style: solid;
    border-width: 5px 20px; 
    /* 5px topo e baixo,
     20px nos lados */
}

p.two {
    border-style: solid;
    border-width: 20px 5px; 
    /* 20px topo e baixo,
     5px nos lados */
}

p.three {
    border-style: solid;
    border-width: 25px 10px 4px 35px; 
    /* 25px topo, 10px direita,
     4px baixo e 35px esquerda */
}
                                

Cor da borda (border-color)

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

A cor pode ser definida por:

• name - especifique um nome de cor, como "vermelho"
• HEX - especifique um valor HEX, como "#ff0000"
• RGB - especifique um valor RGB, como "rgb(255,0,0)"
• HSL - especifique um valor HSL, como "hsl(0, 100%, 50%)" transparente

Nota: Se border-color não estiver definido, herda a cor do elemento.

Cores Laterais Específicas

A border-color propriedade pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e borda esquerda).

                                    
p.one {
    border-style: solid;
    border-color: red green blue yellow; 
    /* vermelho no topo, 
    verde na direita, 
    azul em baixo e amarelo na esquerda */
}
                                

Valores HEX

A cor da borda também pode ser especificada usando um valor hexadecimal (HEX):

                                
p.one {
    border-style: solid;
    border-color: #ff0000; /* vermelho */
}
                            

Valores RGB

Ou usando valores RGB:

                                
p.one {
    border-style: solid;
    border-color: rgb(255, 0, 0); /* vermelho */
}
                            

Valores HSL

Você também pode usar valores HSL:

                                
p.one {
    border-style: solid;
    border-color: hsl(0, 100%, 50%); /* vermelho */
}
                            

Lados da borda

Borda CSS - Lados Individuais

Nos exemplos anteriores, você viu que é possível especificar uma borda diferente para cada lado.

Em CSS, também existem propriedades para especificar cada uma das bordas (superior, direita, inferior e esquerda):

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

O exemplo acima dá o mesmo resultado que este:

                                    
p {
    border-style: dotted solid;
}
                                

Então, aqui está como funciona:

Se a border-style propriedade tiver quatro valores:

• estilo de borda: pontilhado sólido duplo tracejado;
  • borda superior é pontilhada
  • borda direita é sólida
  • borda inferior é dupla
  • borda esquerda é tracejada

Se a border-style propriedade tiver três valores:

• estilo de borda: duplo sólido pontilhado;
  • borda superior é pontilhada
  • as bordas direita e esquerda são sólidas
  • borda inferior é dupla

Se a border-style propriedade tiver dois valores:

• estilo de borda: sólido pontilhado;
  • as bordas superior e inferior são pontilhadas
  • as bordas direita e esquerda são sólidas

Se a border-style propriedade tiver um valor:

• estilo de borda: pontilhado;
  • todas as quatro bordas são pontilhadas

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

A border-style propriedade é usada no exemplo acima. No entanto, também funciona com border-width e border-color.

Propriedade de borda abreviada de CSS

Como você viu na página anterior, há muitas propriedades a serem consideradas ao lidar com bordas.

Para encurtar o código, também é possível especificar todas as propriedades de borda individuais em uma propriedade.

A border propriedade é uma propriedade abreviada para as seguintes propriedades de borda individuais:

• border-width
• border-style (requerido)
• border-color

                                    
p.short {
    border: 5px solid red;
}
                                

Você também pode especificar todas as propriedades de borda individuais para apenas um lado:

                                    
p.left-short {
    border-left: 6px solid red;
}
                                

                                    
p.bottom-short {
    border-bottom: 6px solid red;
}
                                

Bordas arredondadas

A border-radius propriedade é usada para adicionar bordas arredondadas a um elemento:

                                    
p.normal {
    border: 2px solid red;
    padding: 5px;
}
    
p.round1 {
    border: 2px solid red;
    border-radius: 5px;
    padding: 5px;
}
    
p.round2 {
    border: 2px solid red;
    border-radius: 8px;
    padding: 5px;
}
    
p.round3 {
    border: 2px solid red;
    border-radius: 12px;
    padding: 5px;
}
                                

Todas as propriedades de borda