BORDAS CSS

BORDAS CSS

As propriedades de borda css permite colocar estilo, largura e a cor da borda de um elemento.

ESTILO DE BORDA

border-style é a propriedade que especifica tipo de borda.

VALORES DA BORDA:

dotted – borda partilhada.

dashed – borda tracejada.

solid - borda sólida.

double - borda dupla.

groove - borda ranhurada 3D.

ridge - borda ondulada 3D.

inset - borda de inserção 3D.

outset - borda inicial 3D.

none – não tem borda.

Hidden - borda oculta.

<!DOCTYPE html>

<html>

<head>

<style>

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

</style>

</head>

<body>

 

<h2>Propriedade de borda</h2>

<p>Os valores de borda.</p>

 

<p class="dotted">borda partilhada.</p>

<p class="dashed">borda tracejada.</p>

<p class="solid">borda sólida.</p>

<p class="double">borda dupla.</p>

<p class="groove">borda ranhurada 3D.</p>

<p class="ridge">borda ondulada 3D.</p>

<p class="inset">borda de inserção 3D.</p>

<p class="outset">borda inicial 3D.</p>

<p class="none">não tem borda.</p>

<p class="hidden">Borda oculta.</p>

<p class="mix">Borda mista.</p>

 

</body>

</html>