CSS Border: Como Usar

CSS border

O CSS border � uma propriedade que define uma borda em um elemento HTML.

A borda aplicada no elemento pode ter as suas caracter�sticas alteradas como o seu tamanho, a sua cor e o seu estilo.

Como utilizar a propriedade border?

Para utilizar o border, a propriedade deve ser escrita dentro de um seletor CSS, com os valores espec�ficos da propriedade, como vemos no C�digo 1.


  a {
     border: valor;
  }

C�digo 1. Exemplo da propriedade border sendo utilizada no c�digo CSS

A propriedade � iniciada com o valor padr�o none e por isso a borda n�o ficar� vis�vel.

Para que a borda fique vis�vel, o desenvolvedor pode utilizar as propriedades:

border-width: utilizada para definir o tamanho da borda;
border-style: utilizada para definir o estilo da borda;
border-color: utilizada para definir a cor da borda.

Com o uso dessas propriedades o desenvolvedor pode estilizar o tamanho da borda, o seu estilo e a sua cor e assim fazer com que a borda fique vis�vel.

O border tamb�m pode ser escrito de forma a simplificar o c�digo, veremos sobre isso mais � frente.

CSS border: na pr�tica


  p {
      border-width: 2px;
      border-style: solid;
      border-color: black;
  }

C�digo 2. Propriedade border na pr�tica

Sintaxe

A propriedade border pode ser declarada conforme a sintaxe do C�digo 3.


  border-width: 2px;
  border-style: solid;
  border-color: black;

C�digo 3. Sintaxe da propriedade border

Existe tamb�m uma forma abreviada da sintaxe da propriedade border apresentada no C�digo 4.


  border: 2px solid black;

C�digo 4. Sintaxe abreviada do CSS border

Propriedades do CSS border

O CSS border possui algumas propriedades que servem para definir as caracter�sticas da borda de um elemento. Abaixo veremos mais sobres essas propriedades.

border-width

A propriedade border-width � utilizada para definir o tamanho da borda. Veja os valores abaixo:

px: valor num�rico definido em pixels;
em: o valor corresponde a duas vezes o tamanho da fonte do elemento;
rem: o valor corresponde ao tamanho da fonte definida no elemento root;
vh e vw: o valor corresponde ao height (altura) e a width (largura) da viewport (�rea da tela);
thin: define o valor da borda igual a 1px para todos os lados;
medium: define o valor da borda igual a 3px para todos os lados;
thick: define o valor da borda igual a 5px para todos os lados.

border-style

A propriedade border-style � utilizada para definir diferentes estilos para a borda. Veja os valores abaixo:

solid: o valor define uma borda s�lida;
none: o valor n�o define borda;
hidden: o valor define uma borda oculta;
dashed: o valor define uma borda tracejada;
dotted: o valor define uma borda pontilhada;
double: o valor define uma borda dupla;
groove: o valor define uma borda 3D com apar�ncia de bot�o pressionado;
ridge: o valor define uma borda 3D com apar�ncia de bot�o elevado;
inset: o valor define uma borda 3D com apar�ncia levemente pressionada;
outset: o valor define uma borda 3D com apar�ncia levemente elevada.

border-color

A propriedade border-color � utilizada para definir diferentes tipos de cores para a borda. Veja os valores abaixo:

rgb: border-color: rgb(60, 165, 44);
rgba: border-color: rgba(60, 165, 44, 1);
hsl: border-color: hsl(143, 98, 79);
hsla: border-color: hsla(143, 98, 79, 1);
cores hexadecimais: border-color: #3CA52C;
nomes das cores: border-color: navy; /* corresponde a: #000080 */

border-sides: definindo borda com lados individuais

A propriedade border tamb�m pode ser utilizada para criar uma borda com somente um lado espec�fico ou com um estilo diferente de borda para cada lado, como veremos no exemplo dos C�digos 5 e 6. Para que isso seja feito, pode ser utilizado as seguintes propriedades:

border-top: cria a borda somente no topo do elemento;
border-right: cria a borda somente no lado direito do elemento;
border-bottom: cria a borda somente abaixo do elemento;
border-left: cria a borda somente no lado esquerdo do elemento.


  <p>Bordas com linhas diferentes</p>

C�digo 5. C�digo HTML


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

C�digo 6. Exemplo de borda criada com lados de estilos diferentes

See the Pen Exemplo de border-sides by Wladimir Batista Castro (@wladimirrj) on CodePen.

No exemplo do C�digo 6 podemos notar que o elemento <p> vai ganhar uma borda com os lados direito e esquerdo com linhas s�lidas e os lados de cima e abaixo ter�o linhas pontilhadas.

Initial: definindo a propriedade para receber o valor padr�o do elemento

A propriedade border pode ser definida para receber o valor padr�o da borda do elemento HTML ao qual est� atrelado. Para realizar esta aç�o, a propriedade border deve receber o valor initial. Veja a sintaxe abaixo:

border: initial;

Vejamos nos C�digos 7 e 8 um exemplo de como utilizar o valor initial.


  <input type='text' placeholder='Digite o seu nome'>

C�digo 7. C�digo HTML


  input {
    border: initial;
  }

C�digo 8. Exemplo da border recebendo o valor padr�o do elemento

See the Pen Exemplo de borda com valor initial by Wladimir Batista Castro (@wladimirrj) on CodePen.

No exemplo do C�digo 8 podemos notar que a propriedade border receber� o valor padr�o do elemento <input> (none).

Inherit: definindo propriedade para que o elemento filho herde a borda do elemento pai

A propriedade border pode ser definida para fazer com que o elemento filho ao qual a propriedade pertence, herde as caracter�sticas do elemento pai. Para realizar esta aç�o, a propriedade border deve receber o valor inherit. Veja a sintaxe abaixo:

border: inherit;

Vejamos nos C�digos 9 e 10 um exemplo de como utilizar o valor inherit.


  <div>
    elemento pai
    <p>elemento filho</p>
  </div>

C�digo 9. C�digo HTML


  div{
    border-width: 5px;
    border-style: solid;
    border-color: red;
  }
  p {
    padding: 10px;
    display: flex;
    justify-content: center;
    border: inherit;
  }

C�digo 10. Exemplo de elemento filho herdando a borda do elemento pai

See the Pen Exemplo de borda com valor Inherit by Wladimir Batista Castro (@wladimirrj) on CodePen.

No exemplo do C�digo 10 podemos notar que o elemento pai (<div>) possui uma borda vermelha com 5px de largura e o elemento <p> (elemento filho que recebe o valor inherit) herdar� essa mesma borda do elemento pai.

Simplificaç�o da Sintaxe

A propriedade border possui uma forma abreviada de escrever a sua sintaxe, como vemos no exemplo do C�digo 11.


  border: 2px solid black;

C�digo 11. Sintaxe abreviada da propriedade border

O c�digo escrito no C�digo 11 tem os mesmo recursos que j� foram mostrados antes no C�digo 3.

Veja na Figura 1 como podemos ler a sintaxe abreviada apresentada no C�digo 9.

Figura 1. Sintaxe abreviada

Veja na figura acima que os valores aplicados a propriedade border representam as propriedades: border-width, border-style e border-color.

Border-radius

O CSS border possui uma propriedade que d� a capacidade de adicionar bordas arredondadas a um elemento. Essa propriedade � conhecida como border-radius.

O border-radius utiliza de valores num�ricos para criar cantos circulares ou cantos el�pticos. Veja abaixo esses valores:

px: valor num�rico definido em pixels;
%: valor num�rico definido em porcentagem.

Veja abaixo exemplos de elementos com bordas arredondadas.

Exemplo 1


  <p class='exemplo1'>Exemplo 1 border-radius</p>

C�digo 12. C�digo HTML


  p.exemplo1 {
    width: 50%;
    padding: 10px;
    border: 5px solid red;
    border-radius: 8px;
  }

C�digo 13. Exemplo de elemento com bordas arredondadas

See the Pen border-radius - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

No C�digo 13 temos um exemplo de bordas arredondadas com o valor de 8px para todos os lados da borda.

Exemplo 2


  <p class='exemplo2'>Exemplo 2 border-radius</p>

C�digo 14. C�digo HTML


  p.exemplo2 {
    width: 50%;
    padding: 10px;
    border: 10px solid blue;
    border-radius: 35% 10%;
  }

C�digo 15. Exemplo de elemento com bordas arredondadas

See the Pen border-radius - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

No C�digo 15 temos um exemplo de bordas arredondadas com o valor de 25% para os lados top e bottom e o valor de 10% para os lados right e left.

Compatibilidade com navegadores

O CSS border � compat�vel com todos os navegadores apresentados na tabela abaixo:

border	Chrome	Mozilla Firefox	Edge / IE	Opera	Safari
border	Sim	Sim	Sim	Sim	Sim

CSS Border

Nesta documentação você aprenderá sobre a propriedade CSS border, suas características e como utilizá-la no código CSS para definir a borda de um elemento HTML.