Borders are generally used to display an outline around a box or table cell or any other HTML element. In W3.CSS, there are different classes available to add or remove borders. The classes that are used to add borders are referred to as additive classes and those that are used to remove borders are referred to as subtractive classes.
Additive Border Classes:
Sr. No. |
Class Name |
Description |
1.
|
w3-border
|
It is used to add a border around the targeted element.
|
2.
|
w3-border-top
|
It is used to add a top border to the targeted element.
|
3.
|
w3-border-bottom
|
It is used to add a bottom border to the targeted element.
|
4.
|
w3-border-right
|
It is used to add a right border to the targeted element.
|
5.
|
w3-border-left
|
It is used to add a left border to the targeted element.
|
Subtractive Border Classes:
Sr. No.
|
Class Name
|
Description
|
1.
|
w3-border-0
|
Removes all the border from the targeted element.
|
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
< style >
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</ style >
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >GeeksForGeeks</ h2 >
</ div >
< 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 >
< 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 >
|
Output:
Color of Borders: Any color can be added to the border by using the following border-color classes that are available in W3.CSS. If you want any other customized color, then you can set it manually using the CSS attribute.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
< style >
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</ style >
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >GeeksForGeeks</ h2 >
</ div >
< 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 >
< 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 >
|
Output:
Thick Border:
You can add a thick border to any side of the targeted element by using W3.CSS border classes.
Sr. No. |
Class Name |
Description |
1. |
w3-bottombar |
It is used to add a thick border at the bottom of the targeted element. |
2. |
w3-leftbar |
It is used to add a thick border at the left side of the targeted element. |
3. |
w3-rightbar |
It is used to add a thick border at the right side of the targeted element. |
4. |
w3-topbar |
It is used to add a thick border at the top of the targeted element. |
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
< style >
/* CSS for Square boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</ style >
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >GeeksForGeeks</ h2 >
</ div >
< 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 >
|
Output:
Last Updated :
02 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...