W3.CSS Borders:

---

W3.CSS Borders:

W3.CSS provides a rich set of classes for making borders to the contents.

• w3-border: Adds borders (top, right, bottom, left) to an element
• w3-border-top: Adds a top border to an element
• w3-border-right: Adds a right border to an element
• w3-border-bottom: Adds a bottom border to an element
• w3-border-left: Adds a left border to an element
• w3-border-0: Removes all borders
• w3-border-color: Displays the border in a specified color (like red, blue, etc)
• w3-hover-border-color: Adds a hoverable border color
• w3-bottombar: Adds a thick bottom border to an element
• w3-leftbar: Adds a thick left border to an element
• w3-rightbar: Adds a thick right border to an element
• w3-topbar: Adds a thick top border to an element

---

Using classes w3-border, w3-border-bottom and w3-border-right:

Here, two panels are nested inside of one container. On panel has all borders and the other has bottom left borders.
Output:

---

Using classes w3-border-color and w3-hover-border-color:

Here, one panel has constant RED border and the other has hoverable GREEN border. We can define all borders of different colors and hoverability.
Output:

---

Using classes w3-round-xlarge and w3-leftbar:

Here, one panel has rounded corner border and the other has blue leftbar on a yellow background. We can define all sidebars of different colours.
Output:

---