LADOS DA BORDA CSS
BORDA – LADOS DIFERENTES
Existem propriedades para especificar cada lado (superior, direita, inferior e esquerda)
<!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>Borda com
lados diferentes</h2>
<p>Aplicado style
na borda. </p>
</body>
</html>
SIMPLIFICANDO A PROPRIEDADE CSS. DÁ MESMO ACIMA.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<h2>LADO COM
BORDA INDIVIDUAL</h2>
<p>2 LADOS COM
BORDA DIFERENTE</p>
</body>
</html>
Border-style propriedade tiver quatro valores:
Ø borda superior é pontilhada
Ø borda direita é sólida
Ø borda inferior é dupla
Ø borda esquerda é tracejada
Border-style propriedade tiver três
valores:
Ø borda superior é pontilhada
Ø as bordas direita e esquerda são sólidas
Ø borda inferior é dupla
Border-style propriedade tiver dois valores:
Ø as bordas superior e inferior são pontilhadas
Ø as bordas direita e esquerda são sólidas
Border-style propriedade tiver um valor:
Ø todas as quatro bordas são pontilhadas
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* quatro valores */
p.quatro {
border-style: dotted solid double dashed;
}
/*tres valores */
p.tres {
border-style: dotted solid double;
}
/* dois valores */
p.dois {
border-style: dotted solid;
}
/* um valor */
p.um{
border-style: dotted;
}
</style>
</head>
<body>
<h2>Borda individual</h2>
<p class="quatro">4
estilos bordas diferentes. </p>
<p class="tres">3
estilos bordas diferentes. </p>
<p class="dois">2
estilos bordas diferentes. </p>
<p class="um">1 estilo
borda diferente. </p>
</body>
</html>