Fronteiras W3.CSS
Eu tenho fronteiras.
Eu tenho apenas uma borda esquerda.
Eu tenho uma borda superior e inferior verde.
Eu tenho bordas azuis.
Borda vermelha que fica verde ao passar o mouse.
Classes de borda W3.CSS
O W3.CSS fornece as seguintes classes de borda:
| Classe | Define |
|---|---|
| w3-borda | Adiciona bordas (superior, direita, inferior, esquerda) a um elemento |
| w3-borda-topo | Adiciona uma borda superior a um elemento |
| w3-border-right | Adiciona uma borda direita a um elemento |
| w3-border-bottom | Adiciona uma borda inferior a um elemento |
| w3-borda-esquerda | Adiciona uma borda esquerda a um elemento |
| w3-border-0 | Remove todas as bordas |
| w3-border- color | Exibe a borda em uma cor especificada (como vermelho, azul, etc.) |
| w3-hover-border- color | Adiciona uma cor de borda flutuante |
| w3-bottommbar | Adiciona uma borda inferior grossa a um elemento |
| w3-barra esquerda | Adiciona uma borda esquerda grossa a um elemento |
| w3-barra direita | Adiciona uma borda direita grossa a um elemento |
| w3-topbar | Adiciona uma borda superior grossa a um elemento |
Adicionando bordas
As classes w3-border são usadas para adicionar bordas a qualquer elemento HTML:
Eu tenho fronteiras.
Eu tenho apenas uma borda esquerda.
Eu tenho bordas superior e inferior.
Exemplo
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
Cores da borda
As classes w3-border -color são usadas para adicionar cores às bordas:
Eu tenho bordas vermelhas.
Eu tenho uma borda esquerda azul.
Eu tenho uma borda superior e inferior verde.
Eu tenho uma borda esquerda vermelha e uma cor de fundo vermelho pálido.
Exemplo
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
Bordas arredondadas
Para adicionar bordas arredondadas, adicione uma das classes w3-round -size :
Eu tenho bordas normais.
Eu tenho pequenas bordas arredondadas.
Eu tenho bordas arredondadas.
Eu tenho grandes bordas arredondadas.
Eu tenho bordas arredondadas xlarge.
Eu tenho xxlarge bordas arredondadas.
Exemplo
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel
w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have
large rounded borders.</p>
</div>
<div class="w3-panel w3-border
w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have
xxlarge rounded borders.</p>
</div>
Bordas grossas
As classes w3-topbar , w3-bottombar , w3-leftbar e w3-rightbar são usadas para adicionar bordas grossas a um elemento:
Exemplo
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
Fronteiras flutuantes
As classes w3-hover-border- color alteram a cor da borda ao passar o mouse:
Borda que fica vermelha ao passar o mouse.
Borda vermelha que fica verde ao passar o mouse.
Exemplo
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
Exemplo
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
Borda branca grossa (invisível) que fica verde ao passar o mouse.
Borda branca grossa (invisível) que fica preta ao passar o mouse.
Exemplo
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>