Bordes W3.CSS
tengo fronteras
Solo tengo un borde izquierdo.
Tengo un borde superior e inferior verde.
Tengo bordes azules.
Borde rojo que se vuelve verde al pasar el mouse.
Clases de borde W3.CSS
W3.CSS proporciona las siguientes clases de borde:
| Clase | define |
|---|---|
| borde w3 | Agrega bordes (superior, derecho, inferior, izquierdo) a un elemento |
| w3-borde-superior | Agrega un borde superior a un elemento |
| w3-borde-derecho | Agrega un borde derecho a un elemento |
| w3-borde-inferior | Agrega un borde inferior a un elemento |
| w3-borde-izquierda | Agrega un borde izquierdo a un elemento |
| w3-borde-0 | Elimina todos los bordes |
| color de borde w3 | Muestra el borde en un color específico (como rojo, azul, etc.) |
| w3-hover-border- color | Agrega un color de borde flotante |
| w3-inferior | Agrega un borde inferior grueso a un elemento |
| w3-barra izquierda | Agrega un borde izquierdo grueso a un elemento |
| w3-barra derecha | Agrega un borde derecho grueso a un elemento |
| w3-barra superior | Agrega un borde superior grueso a un elemento |
Adición de bordes
Las clases de borde w3 se utilizan para agregar bordes a cualquier elemento HTML:
tengo fronteras
Solo tengo un borde izquierdo.
Tengo bordes superior e inferior.
Ejemplo
<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>
Colores de borde
Las clases w3-border -color se utilizan para agregar colores a los bordes:
Tengo bordes rojos.
Tengo un borde izquierdo azul.
Tengo un borde superior e inferior verde.
Tengo un borde izquierdo rojo y un color de fondo rojo pálido.
Ejemplo
<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>
Bordes redondeados
Para agregar bordes redondeados, agregue una de las clases w3-round -size :
Tengo bordes normales.
Tengo pequeños bordes redondeados.
Tengo bordes redondeados.
Tengo grandes bordes redondeados.
Tengo bordes redondeados extragrandes.
Tengo bordes redondeados xxlarge.
Ejemplo
<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>
bordes gruesos
Las clases w3-topbar , w3-bottombar , w3-leftbar y w3-rightbar se utilizan para agregar bordes gruesos a un elemento:
Ejemplo
<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>
Fronteras flotantes
Las clases w3-hover-border- color cambian el color del borde al pasar el mouse:
Borde que se vuelve rojo al pasar el mouse.
Borde rojo que se vuelve verde al pasar el mouse.
Ejemplo
<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>
Ejemplo
<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>
Borde blanco grueso (invisible) que se vuelve verde al pasar el mouse sobre él.
Borde blanco grueso (invisible) que se vuelve negro al pasar el mouse sobre él.
Ejemplo
<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>