Introduction
This chapter demonstrates about the W3CSS Borders these are the borders for the HTML elements which creates boundry around the elements and following are the concepts covered in this chapter.
- Border Classes
- Bar Classes
- Rounded Borders
- Hoverable Borders
Description
Border creates boundary around the elements which can be used on any HTML elements. In order to form the boundary lines W3.CSS have some classes those are tabulated below.
| Class | Description |
|---|---|
| w3-border | Which defines borders means all borders (top, right, bottom, left). |
| w3-border-top | Which defines the top border. |
| w3-border-bottom | Which defines the bottom border. |
| w3-border-right | Which defines the right border. |
| w3-border-left | Which defines the left border. |
| w3-border-0 | Which remove all borders. |
| w3-border-color | Which specify the borders in required color. |
| w3-hover-border-color | Which specify the Hoverable border color. |
Description
In order to bound any element user can also use W3.CSS bar classes which can be used on any HTML elements. The table below demonstrates Bar classes and its description as shown.
The image below demonstrates to creating the left bar as shown below.
The code below demonstrates the Adding bars around an HTML Element as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Borders</h2>
<div class="w3-container w3-aqua w3-leftbar w3-border-blue">
<p>SPLESSONS with blue left bar</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Class | Description |
|---|---|
| w3-bottombar | Which provides a thick bottom bar to an HTML element. |
| w3-topbar | Which provides a thick top bar to an HTML element. |
| w3-rightbar | Which provides a thick right bar to an HTML element. |
| w3-leftbar | Which provides a thick left bar to an HTML element. |
Description
By using the W3.CSS user can create rounded borders these are very attractive to the HTML elements the code below demonstrates to creating the rounded borders as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Borders</h2>
<div class="w3-container w3-section w3-border">
<p>SPLESSONS with borders.</p>
</div>
<div class="w3-container w3-section w3-border w3-round-xlarge">
<p>SPLESSONS with rounded borders.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS user can create hoverable borders which means it can change the color of the border while over the mouse it can be created by using the w3-hover-border-color class the code below demonstrates the creating the hoverable borders as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>SPlessons Hoverable Borders</h2>
<div class="w3-container w3-section w3-border w3-hover-border-red">
<p>Red hoverable border</p>
</div>
<div class="w3-container w3-section w3-border w3-border-purple w3-hover-border-aqua">
<p>Purple border turns to aqua on hover</p>
</div>
<div class="w3-container w3-section w3-pale-red w3-leftbar w3-rightbar w3-border-aqua w3-hover-border-purple">
<p>aqua bar turns to purple on hover.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Hoverable borders change the colors when mouse over the borders.
- In W3.CSS user can get the rounded borders.
- W3.CSS have the different types of Bar classes.