CSS Border

Border - CSS

Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.

border-width
border-color
border-style
Exemplos de definição de bordas
border

Espessura das bordas [border-width]

A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:

Css Border

As cores das bordas [border-color]

A propriedade border-color define as cores para as bordas. Os valores são expressos em código ou nome de cores, por exemplo, "#112233", "rgb(122,122,122)" ou "red" .

Tipos de bordas[border-style]

Existem vários tipos de bordas disponíveis para escolha. A imagem seguinte apresenta 8 tipos diferentes de bordas e como são renderizadas no Internet Explorer. Todos os exemplos são mostrados na cor "gold" e com espessura "thick", mas pode usar qualquer cor e espessura.

Os valores none ou hidden podem ser usados quando não se deseja a existência de bordas.

Border-Style CSS

Exemplos de definição de bordas

As três propriedades descritas anteriormente podem ser definidas juntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas:

h1 {
   border-width: thick;
   border-style: dotted;
   border-color: gold;
}

h2 {
   border-width: 20px;
   border-style: outset;
   border-color: red;
}

p {
   border-width: 1px;
   border-style: dashed;
   border-color: blue;
}

ul {
   border-width: thin;
   border-style: solid;
   border-color: orange;
}



É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda).

h1 {
   border-top-width: thick;
   border-top-style: solid;
   border-top-color: red;

   border-bottom-width: thick;
   border-bottom-style: solid;
   border-bottom-color: blue;

   border-right-width: thick;
   border-right-style: solid;
   border-right-color: green;

   border-left-width: thick;
   border-left-style: solid;
   border-left-color: orange;
}

[border]

Pode-se usar uma declaração abreviada para border.

p {
   border-width: 1px;
   border-style: solid;
   border-color: blue;
}

Pode ser abreviada por:

p {
   border: 1px solid blue;
}