Lados da borda CSS

Índice

    Mostrar índice

Borda CSS - Lados Individuais

Nos exemplos das páginas anteriores, você viu que é possível especificar um borda diferente para cada lado.

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

Exemplo

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

Resultado:

Different Border Styles

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

O exemplo acima dá o mesmo resultado que este:

Exemplo

p {	border-style: dotted solid;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

Então, aqui está como funciona:

Se a propriedade class="w3-codespan">border-style tiver quatro valores:

  • estilo de borda: pontilhado sólido duplo tracejado;

    • a borda superior está pontilhada

    • a borda direita é sólida

    • a borda inferior é dupla

    • a borda esquerda está tracejada

Se a propriedade class="w3-codespan">border-style tiver três valores:

  • estilo de borda: duplo sólido pontilhado;

    • a borda superior está pontilhada

    • as bordas direita e esquerda são sólidas

    • a borda inferior é dupla

Se a propriedade class="w3-codespan">border-style tiver dois valores:

  • estilo de borda: sólido pontilhado;

    • as bordas superior e inferior estão pontilhadas

    • as bordas direita e esquerda são sólidas

Se a propriedade class="w3-codespan">border-style tiver um valor:

  • estilo de borda: pontilhada;

    • todas as quatro bordas estão pontilhadas

Exemplo

 /* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three 
  values */
p {
  border-style: dotted solid double; 
}
  
/* Two values */
p {
  border-style: dotted solid; 
}
/* One value */
p {
  border-style: dotted; 
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>

A propriedade class="w3-codespan">border-style é usada no exemplo acima. No entanto, também funciona com class="w3-codespan">largura da borda e class="w3-codespan">cor da borda.