반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-style</title>
<style>
p{
border-width:1px;
}
.none{
border-style:none;
}
.hidden{
border-style:hidden;
}
.solid{
border-style:solid;
}
.double{
border-style:double;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.groove{
border-style:groove;
}
.ridge{
border-style:ridge;
}
.inset{
border-style:inset;
}
.outset{
border-style:outset;
}
</style>
</head>
<body>
<p class="none">none</p>
<p class="hidden">hidden</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
</body>
</html>
반응형
'HTML + CSS + 자바스크립트' 카테고리의 다른 글
| animation-fill-mode 속성값으로 애니메이션 실행 전 후 스타일 지정하기 (0) | 2023.11.29 |
|---|---|
| 다양한 transition-timing-function 속성값으로 전환 효과 진행 속도 지정하기 (0) | 2023.11.29 |
| CSS 적용 우선 순위에 따라 결과가 달라진다 : 개별성 규칙 (0) | 2023.11.28 |
| 가상 클래스 선택자가 뭐지?? (0) | 2023.11.27 |
| HTML 많이 사용하는 input 태그의 type 속성값 (0) | 2023.11.23 |
