In the last article, we started our discussion about the borders. We saw that there are twelve basic W3CSS classes that are related to borders. We studied half of them in the last article. This article has been named W3CSS borders advanced because apart from studying the remaining six border classes, we shall also study concepts like W3CSS rounded borders and thick borders. However, let’s first start our discussion with thick borders.
To add thick borders around an html element, we can use w3-rightbar, w3-leftbar, w3-topbar and w3-bottombar classes. Take a look at the following example to see their usage.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> </head> <body> <span class="w3-rightbar w3-border-yellow"> This is with right border </span> <span class="w3-bottombar w3-border-red"> This is with bottom border </span> </br> <span class="w3-topbar w3-border-green"> This is with top border </span> <span class="w3-leftbar w3-border-blue"> This is with left border </span> </body> </html>
In the above web page we have four span elements. A right yellow thick border has been added to first span tag, a bottom red thick border has been added to second yellow. Similarly, a top green thick border is added to third span while last span tag has blue thick border at its left. If you open the web page, you shall see these four span tags separated by their corresponding borders.
It is very easy to create rounded border around HTML elements. Simply use w3-round-size class along with w3-border class. Similarly, to create hoverable border effect, use w3-hover-border-color class with the element. The following example demonstrates both of these classes in action. Take a look at them.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> </head> <body> <div class="w3-container w3-yellow w3-border w3-border-purple w3-hover-border-black"> <p>This is with pink background<p> </div> <div class="w3-container w3-red w3-border w3-round-xlarge"> <p>This is with red</p> </div> </body> </html>
Take a careful look at the above code. Here we have two containers. The first container has yellow background and purple border. The hover border effect is added to it. When a user hovers on the yellow container, the border color changes to black. Similarly, the second container demonstrates the rounded border effect where the border of the container has been rounded via w3-border-xlarge class. You can use small, or large classes as well to style the rounded border.