W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h2>Hover Border Colors</h2>
<p>The <b>w3-hover-border-color</b> classes change an existing border's color when you move the pointer over the element.</p>
<p>Move the pointer over each box to see its border color change.</p>
<p>Each box uses w3-border for a border on all sides and w3-leftbar for a thicker left border that makes the color easier to see.</p>
<p>The gray and grey spellings produce the same colors.</p>

<div class="w3-panel w3-border w3-leftbar w3-hover-border-amber">
  <p>w3-hover-border-amber</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-aqua">
  <p>w3-hover-border-aqua</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-black">
  <p>w3-hover-border-black</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-blue">
  <p>w3-hover-border-blue</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-blue-gray">
  <p>w3-hover-border-blue-gray</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-blue-grey">
  <p>w3-hover-border-blue-grey</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-brown">
  <p>w3-hover-border-brown</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-cyan">
  <p>w3-hover-border-cyan</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-dark-gray">
  <p>w3-hover-border-dark-gray</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-dark-grey">
  <p>w3-hover-border-dark-grey</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-deep-orange">
  <p>w3-hover-border-deep-orange</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-deep-purple">
  <p>w3-hover-border-deep-purple</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-gray">
  <p>w3-hover-border-gray</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-green">
  <p>w3-hover-border-green</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-grey">
  <p>w3-hover-border-grey</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-indigo">
  <p>w3-hover-border-indigo</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-khaki">
  <p>w3-hover-border-khaki</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-light-blue">
  <p>w3-hover-border-light-blue</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-light-gray">
  <p>w3-hover-border-light-gray</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-light-green">
  <p>w3-hover-border-light-green</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-light-grey">
  <p>w3-hover-border-light-grey</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-lime">
  <p>w3-hover-border-lime</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-orange">
  <p>w3-hover-border-orange</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-pale-blue">
  <p>w3-hover-border-pale-blue</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-pale-green">
  <p>w3-hover-border-pale-green</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-pale-red">
  <p>w3-hover-border-pale-red</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-pale-yellow">
  <p>w3-hover-border-pale-yellow</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-pink">
  <p>w3-hover-border-pink</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-purple">
  <p>w3-hover-border-purple</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-red">
  <p>w3-hover-border-red</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-sand">
  <p>w3-hover-border-sand</p>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-teal">
  <p>w3-hover-border-teal</p>
</div>
<div class="w3-container w3-dark-grey">
<div class="w3-panel w3-border w3-leftbar w3-hover-border-white">
  <p>w3-hover-border-white</p>
</div>
</div>
<div class="w3-panel w3-border w3-leftbar w3-hover-border-yellow">
  <p>w3-hover-border-yellow</p>
</div>

</body>
</html>