Table of Contents
W3.CSS Borders
w3-border : Using this class to add borders (top, right, bottom, left) to an element.
w3-border-top : Using this class to add a top border to an element.
w3-border-right : Using this class to add a right border to an element.
w3-border-bottom : Using this class to add a bottom border to an element.
w3-border-left : Using this class to add a left border to an element.
w3-border-0 : Using this class to remove all borders.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<h2> Use of Borders</h2>
<div class="w3-panel w3-border">
<p>This paragraph is all borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>This paragraph is a left border.</p>
</div>
<div class="w3-panel w3-border-right">
<p>This paragraphis a right border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>This paragraph is both top and bottom borders.</p>
</div>
</div>
</body>
</html>W3.CSS Rounded Borders
The w3-round-size class adds rounded borders.
- small: Use the small class to display small panels.
- large: Use the large class to display large panels.
- xlarge :Use the xlarge class to display an xlarge panels.
- xxlarge :Use the xxlarge class to display an xxlarge panels.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<h3> Use of Rounded Borders</h3>
<div class="w3-panel w3-border w3-round">
<p>This paragraph is all borders.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>This paragraph is all borders.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>This paragraph is all borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xlarge">
<p>This paragraph is all borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>This paragraph is all borders.</p>
</div>
</div>
</body>
</html>
W3.CSS Borders Colors
w3-border-color : Using this class to display the border in a specified color (like red, blue, etc).
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<h2>Use of different Border with Colors</h2>
<div class="w3-panel w3-border w3-border-green">
<p>This is green border.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>This is blue left border.</p>
</div>
<div class="w3-panel w3-border-right w3-border-red">
<p>This is red right border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>This is green top and bottom border.</p>
</div>
<div class="w3-panel w3-border-left w3-pale-red w3-border-red">
<p>I have a red left border and a pale-red background color.</p>
</div>
</div>
</body>
</html>
W3.CSS Hover Border Color
w3-hover-border-color : Using this class to add a hoverable border color.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="w3.css">
<body>
<div class="w3-container">
<h2>Use of different Border with Colors</h2>
<div class="w3-panel w3-border w3-border-green w3-hover-border-red">
<p>This is green border with red color hover.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue w3-hover-border-orange">
<p>This is blue left border with orange color hover.</p>
</div>
<div class="w3-panel w3-border-right w3-border-red w3-hover-border-green">
<p>This is red right border with green color hover.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green w3-hover-border-blue">
<p>This is green top and bottom border with blue color hover.</p>
</div>
<div class="w3-panel w3-border-left w3-pale-red w3-border-red w3-hover-border-blue">
<p>I have a red left border and a pale-red background color with blue color hover.</p>
</div>
</div>
</body>
</html>