We covered W3CSS containers in the last article. But W3CSS is not limited to that, it allows you to different types of borders around html elements. W3CSS borders are implemented via 12 different border classes. These classes are as follows:
In this example we shall add borders to five different containers. We shall use the first five classes to style borders around these containers. Take a look at the following example.
<!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-border w3-border-yellow"> <p>This is with overall border<p> </div> <div class="w3-container w3-border-right"> <p>This is with right border</p> </div> <div class="w3-container w3-border-left"> <p>This is with left border</p> </div> <div class="w3-container w3-border-top"> <p>This is with top border</p> </div> <div class="w3-container w3-border-bottom"> <p>This is with bottom border</p> </div> </body> </html>
It can be seen in the above code that we added w3-border and w3-border-yellow classes to the first div. This adds a yellow border on all sides of the first div. Similarly, for second and third div, we added right and left border. Finally for 4th and 5th div we added top and bottom borders. If you open the above page in browser, you shall see these borders around the div. Watch closely to see right and left borders as the div contains whole width of the browser, therefore the browser stretches to extreme right and left side of the page. In the next article we shall continue our discussion on borders.