Los bordes generalmente se usan para mostrar un contorno alrededor de un cuadro o celda de tabla o cualquier otro elemento HTML. En W3.CSS, hay diferentes clases disponibles para agregar o eliminar bordes. Las clases que se utilizan para agregar bordes se denominan clases aditivas y las que se utilizan para eliminar bordes se denominan clases sustractivas .
Clases de borde aditivo:
| No Señor. | Nombre de la clase | Descripción |
|---|---|---|
|
1. |
borde w3 |
Se utiliza para agregar un borde alrededor del elemento de destino. |
|
2. |
w3-borde-superior |
Se utiliza para agregar un borde superior al elemento de destino. |
|
3. |
w3-borde-inferior |
Se utiliza para agregar un borde inferior al elemento de destino. |
|
4. |
w3-borde-derecho |
Se utiliza para agregar un borde derecho al elemento de destino. |
|
5. |
w3-borde-izquierda |
Se utiliza para agregar un borde izquierdo al elemento de destino. |
Clases de borde sustractivo:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
w3-borde-0 |
Elimina todo el borde del elemento de destino. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<!-- Additive Border Classes in W3.CSS -->
<div class="w3-container w3-center">
<h2 class="w3-text-pink">Additive Border Classes</h2>
<span class="w3-border w3-border-black"></span>
<span class="w3-border-top w3-border-black"></span>
<span class="w3-border-left w3-border-black"></span>
<span class="w3-border-bottom w3-border-black"></span>
<span class="w3-border-right w3-border-black"></span>
</div>
<!-- Subtractive Border Class in W3.CSS -->
<div class="w3-container w3-center">
<h2 class="w3-text-pink">Subtractive Border Classes</h2>
<span class="w3-border w3-border-black"></span>
<span class="w3-border-0"></span>
</div>
</body>
</html>
Producción:
Color de los bordes: se puede agregar cualquier color al borde mediante las siguientes clases de color de borde que están disponibles en W3.CSS. Si desea cualquier otro color personalizado, puede configurarlo manualmente utilizando el atributo CSS.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the
content of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<!-- Border Color Classes in W3.CSS -->
<div class="w3-container w3-center">
<h2 class="w3-text-pink">Coloured Border</h2>
<span class="w3-border w3-border-amber"></span>
<span class="w3-border w3-border-aqua"></span>
<span class="w3-border w3-border-blue"></span>
<span class="w3-border w3-border-cyan"></span>
<span class="w3-border w3-border-pink"></span>
</div>
<!-- Hoverable Border Colour Classes in W3.CSS -->
<div class="w3-container w3-center">
<h2 class="w3-text-pink">Hoverable Coloured Border</h2>
<span class="w3-border w3-hover-border-amber"></span>
<span class="w3-border w3-hover-border-aqua"></span>
<span class="w3-border w3-hover-border-blue"></span>
<span class="w3-border w3-hover-border-cyan"></span>
<span class="w3-border w3-hover-border-pink"></span>
</div>
</body>
</html>
Producción:
borde grueso:
Puede agregar un borde grueso a cualquier lado del elemento de destino mediante las clases de borde W3.CSS.
| No Señor. | Nombre de la clase | Descripción |
|---|---|---|
| 1. | w3-inferior | Se utiliza para agregar un borde grueso en la parte inferior del elemento de destino. |
| 2. | w3-barra izquierda | Se utiliza para agregar un borde grueso en el lado izquierdo del elemento de destino. |
| 3. | w3-barra derecha | Se utiliza para agregar un borde grueso en el lado derecho del elemento de destino. |
| 4. | w3-barra superior | Se utiliza para agregar un borde grueso en la parte superior del elemento de destino. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<!-- w3-container is used to add
16px padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<!-- Thick Border Classes in W3.CSS -->
<div class="w3-container w3-center">
<h2 class="w3-text-pink">Thick Border Classes</h2>
<span class="w3-bottombar w3-border-amber"></span>
<span class="w3-leftbar w3-border-green"></span>
<span class="w3-topbar w3-border-blue"></span>
<span class="w3-rightbar w3-border-cyan"></span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA