div {
border: 1px solid black;
padding: 5px;
margin: 5px 10px;
}
.ex1:hover {outline-style: none;}
.ex2:hover {outline-style: hidden;}
.ex3:hover {outline-style: dotted;}
.ex4:hover {outline-style: dashed;}
.ex5:hover {outline-style: solid;}
.ex6:hover {outline-style: double;}
.ex7:hover {outline-style: groove;}
.ex8:hover {outline-style: ridge;}
.ex9:hover {outline-style: inset;}
.ex10:hover {outline-style: outset;}
div:hover {
outline-width: medium;
outline-color: red;
outline-offset : 5px;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<p>요소에 마우스를 올리세요</p>
<div class="ex1">none</div>
<div class="ex2">hidden</div>
<div class="ex3">dotted</div>
<div class="ex4">dashed</div>
<div class="ex5">solid</div>
<div class="ex6">double</div>
<div class="ex7">groove</div>
<div class="ex8">ridge</div>
<div class="ex9">inset</div>
<div class="ex10">outset</div>
</body>
</html>