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>
Output
W3.CSS

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.
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>
Output
W3.CSS

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).

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>
Output
W3.CSS

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.

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>
Output
W3.CSS

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.

Previour Topic
Next Topic
W3.Css Framework
CSS Framework Website development using W3.CSS Framework. W3.CSS is a Framework W3.CSS is a modern CSS framework with built-in responsiveness ...
Read More
W3.Css Containers
W3.Css Containers W3. CSS Containers is predefine class use just like a external CSS. The W3-Container class adds a 16px left ...
Read More
W3.CSS Background colors
W3.CSS Background colors The w3-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Text colors
W3.CSS Text colors The W3-text-color classes set the background color for any HTML element. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link ...
Read More
W3.CSS Hover Colors
W3.CSS Hover Colors The W3-hover-color classes define the background hover color for any HTML element. The W3-hover-text-color classes define the text hover ...
Read More
W3.CSS Panels
W3.CSS Panels Panels are the same as containers but extra feature is to added top and bottom margin. The w3-panel ...
Read More
W3.CSS Borders
W3.CSS Borders w3-border : Using this class to add borders (top, right, bottom, left) to an element.w3-border-top : Using this ...
Read More
W3.CSS Bar class
W3.CSS Bar Note : w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element. w3-bottombar ...
Read More
W3.CSS Text Alignment
W3.CSS Text Alignment The w3-left-align classes are used for left alignment elements. The w3-right-align classes are used for right alignment ...
Read More
W3.CSS Text Property
W3.CSS Wide Text The w3-wide classes are used for wider text. Example <!DOCTYPE html> <html> <title>W3.CSS</title> <link rel="stylesheet" href="w3.css"> <body> ...
Read More

Don’t miss Join Our Community!

Email Id
English Hindi