<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<body class="w3-container">

<h2>Hoverable Borders</h2>
<p>The w3-hover-border-<em>color</em> classes change the color of the border when you move the mouse over it:</p>

<div class="w3-container w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div><br>

<div class="w3-container w3-border w3-border-purple w3-hover-border-blue">
  <p>Purple border that turns blue on hover</p>
</div><br>

<div class="w3-container w3-pale-red w3-leftbar w3-rightbar w3-border-red w3-hover-border-green">
<p>Red bars that turns green on hover.</p>
</div>

</body>
</html>