W3.CSS Border

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:

Output:

👁 Image
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:

Output:

👁 Image

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:

Output:

👁 Image