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.
<!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>
Use of Borders
This paragraph is all borders.
This paragraph is a left border.
This paragraphis a right border.
This paragraph is both top and bottom borders.
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.
<!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>
Use of Rounded Borders
This paragraph is all borders.
This paragraph is all borders.
This paragraph is all borders.
This paragraph is all borders.
This paragraph is all borders.
W3.CSS Borders Colors
w3-border-color : Using this class to display the border in a specified color (like red, blue, etc).
<!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>
Use of different Border with Colors
This is green border.
This is blue left border.
This is red right border.
This is green top and bottom border.
I have a red left border and a pale-red background color.
W3.CSS Hover Border Color
w3-hover-border-color : Using this class to add a hoverable border color.
<!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>
Use of different Border with Colors
This is green border with red color hover.
This is blue left border with orange color hover.
This is red right border with green color hover.
This is green top and bottom border with blue color hover.
I have a red left border and a pale-red background color with blue color hover.
Read More
Read More
Read More
Read More
Read More
Read More
Read More
Read More
Read More
Read More