W3.CSS Borders






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



W3.CSS Borders




❮ Previous
Next ❯



I have borders.




I have only a left border.




I have a green top and bottom border.




I have blue borders.




I have a thick left border.




I have a thick blue top and bottom border.




Red border that turns green on hover.




W3.CSS Border Classes


W3.CSS provides the following border classes:























































Class Defines
w3-border Adds borders (top, right, bottom, left) to an element
w3-border-top Adds a top border to an element
w3-border-right Adds a right border to an element
w3-border-bottom Adds a bottom border to an element
w3-border-left Adds a left border to an element
w3-border-0 Removes all borders
w3-border-color
 Displays the border in a specified color (like red, blue, etc)
w3-hover-border-color
 Adds a hoverable border color
w3-bottombar Adds a thick bottom border to an element
w3-leftbar Adds a thick left border to an element
w3-rightbar Adds a thick right border to an element
w3-topbar Adds a thick top border to an element





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Adding Borders


The w3-border classes are used to add borders to any HTML element:



I have borders.




I have only a left border.




I have top and bottom borders.





Example



<div class="w3-panel w3-border">
  <p>I have borders.</p>
</div>

<div class="w3-panel w3-border-left">
  <p>I have only a left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom">
  <p>I have top and bottom borders.</p>
</div>

Try It Yourself »


Border Colors


The w3-border-color classes are used to add colors to borders:



I have red borders.




I have a blue left border.




I have a green top and bottom border.




I have a red left border and a pale-red background color.





Example



<div class="w3-panel w3-border w3-border-red">
  <p>I have red borders.</p>
</div>

<div class="w3-panel w3-border-left w3-border-blue">
  <p>I have a blue left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
  <p>I have a green top and bottom border.</p>
</div>

Try It Yourself »


Rounded Borders


To add rounded borders, add one of the w3-round-size classes:



I have normal borders.




I have small rounded borders.




I have rounded borders.





I have large rounded borders.





I have xlarge rounded borders.





I have xxlarge rounded borders.





Example



<div class="w3-panel w3-border">
  <p>My borders are normal.</p>
</div>

<div class="w3-panel w3-border w3-round-small">
 
<p>My borders are rounded (small).</p>
</div>

<div class="w3-panel
w3-border w3-round">
  <p>My borders are rounded.</p>
</div>

<div class="w3-panel w3-border w3-round-large">
  <p>I have
large rounded borders.</p>
</div>

<div class="w3-panel w3-border
w3-round-xlarge">
  <p>I have xlarge rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xxlarge">
  <p>I have
xxlarge rounded borders.</p>
</div>

Try It Yourself »




Thick Borders


The w3-topbar, w3-bottombar, w3-leftbar,
and w3-rightbar classes are used to add thick borders to an element:



I have a thick left border.




I have a thick blue left border.




I have a thick blue left border and a pale-blue background color.




I have a thick red top and bottom border and a pale-red background color.





Example



<div class="w3-panel w3-leftbar">
  <p>I have a thick left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue">
  <p>I have a thick blue left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
  <p>I have a thick blue left border and a pale-blue background color.</p>
</div>

<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
  <p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>


Try It Yourself »




Hoverable Borders


The w3-hover-border-color classes change the color of the border on mouse-over:




Border that turns red on hover.





Red border that turns green on hover.





Example



<div class="w3-panel w3-border w3-hover-border-red">
  <p>Border that turns red on hover</p>
</div>

<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
  <p>Red border that turns blue on hover</p>
</div>



Try It Yourself »


Thick (invisible) left border that turns green on hover.




Thick (invisible) bottom border that turns green on hover.





Example



<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
  <p>Thick (invisible) left border that turns green on hover.</p>
</div>

<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
  <p>Thick (invisible) bottom border that turns green on hover.</p>
</div>


Try It Yourself »





Thick white (invisible) border that turns green on hover.




Thick white (invisible) border that turns black on hover.





Example



<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
 
<p>Thick (invisible) border that turns green on hover.</p>
</div>

<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
 
<p>Thick (invisible) border that turns black on hover.</p>
</div>


Try It Yourself »






❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more

W3.CSS Tables

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Tables ❮ Previous Next ❯ First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Bo Nilsson 50 Mike Ross 35 W3.CSS Table Classes W3.CSS provides the following classes for tables: Class Defines w3-table Container for an HTML table w3-striped Striped table w3-border Bordered table w3-bordered Bordered lines w3-centered Centered table content w3-hoverable Hoverable table w3-table-all All properties set Basic Table The w3-table class is used to display a basic table: First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Example <table class="w3-table"> <tr>   <th>First Name</th>   <th>Last Name</th>   <th>Points</th> </tr> <tr>   <td>Jill</td>   <td>Smith</td>   <td>50</...
Read more