W3CSS Borders

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:

  • w3-border: This class adds border on all sides of html elements.
  • w3-border-right: It adds border on the right side of the element
  • w3-border-left: It adds border on the left side of the element
  • w3-border-top: It adds border at the top the element
  • w3-border-bottom: It adds border at the bottom of the element
  • w3-border-0: This class removes border from the element.
  • w3-rightbar: This class adds a thick border to the right of the element.
  • w3-leftbar: This class adds a thick border to the left of the element.
  • w3-bottombar: This class adds a thick border to the bottom of the element.
  • w3-topbar: This class adds a thick border to the top of the element.
  • w3-border-color: Adds specified colored border
  • w3-hover-border-color: Change the color of the border upon mouse hover.

W3CSS Borders Example

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>

Download the code Try the code

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.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .