Border

A propriedade borda permite especificar o estilo, tamanho e a cor da borda de um elemento.

border-style

Esta propriedade define o estilo da borda de um elemento. Nenhuma propriedade border terá algum se a propriedade border-style não estiver definida.

Alguns valores válidos para esta propriedade são:

• 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

p{
    border-style: solid;;
}

border-width

A propriedade border-width é usada para definir a largura da borda. A largura é definida em pixels, ou usando um dos três valores pré-definidos: thin, medium ou thick.

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

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

border-color

É usada para definir a cor da borda. Alguns valores válidos para esta propriedade são:

• código hexadecimal: #FFFFFF

• código rgb: rgb(255,235,0)

• nome da cor: red, blue, green, etc

Trabalhando com as bordas individualmente

Em CSS é possível especificar propriedades diferentes para cada lado da borda:

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

A propriedade border-style pode ter de um a quatro valores:

• border-style: dotted solid double dashed;

  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed

• border-style: dotted solid double;

  • top border is dotted
  • right and left borders are solid
  • bottom border is double

• border-style: dotted solid;

  • top and bottom borders are dotted
  • right and left borders are solid

• border-style: dotted;

  • all four borders are dotted

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

Forma abreviada de se utilizar as propriedades de border

Esta é a maneira abreviada de você escrever uma regra para as propriedades das bordas. Você pode declarar todas as tres propriedadesdas bordas em uma regra única:

A propriedade border é a forma abreviada de utilizar os valores das propriedades de borda:

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

p {
    border: 5px solid red;
}