div {
border: 1px solid black;
padding: 5px;
margin: 5px 10px;
}
.ex1:hover {outline-width: thin;}
.ex2:hover {outline-width: medium;}
.ex3:hover {outline-width: thick;}
.ex4:hover {outline-width: 10px;}
div:hover {
outline-color: red;
outline-offset : 5px;
outline-style: dotted;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<p>요소에 마우스를 올리세요</p>
<div class="ex1">outline-width: thin</div>
<div class="ex2">outline-width: medium</div>
<div class="ex3">outline-width: thick</div>
<div class="ex4">outline-width: 10px</div>
</body>
</html>