CSS - 테두리에 스타일 지정

border 를 설정할 수 있는 속성은 다음과 같습니다.

속 성	설 명
border-style	테두리 스타일을 지정 none: 테두리를 감춤 solid: 한 개의 실선 double: 두 개의 실선 groove: 안으로 들어간 선 ridge: 밖으로 돌출된 선 inset: 들어간 3차원 상자 outset: 튀어나온 3차원 상자 dotted: 도트와 공백을 교대로 출력 dashed: 대시와 공백으로 교대로 출력
border-width	테두리 두께 지정 border-top-width: 위쪽 선. border-right-width: 오른쪽 선. border-bottom-width: 아래쪽 선. border-left-width: 왼쪽 선. border-width: 상하좌우를 한꺼번에 지정 <크기> | thin | medium | thick 중 하나를 값으로 지정 가능 medium: 상단 테두리를 조금 두껍게 지정.   thin과 thick의 중간 두께. 기본 값 thin: 상단 테두리를 얇게 지정 thick: 상단 테두리를 두껍게 지정 크기:
border-color	테두리 색상을 지정 border-top-color: 위쪽 선 색상 border-right-color: 오른쪽 선 색상 border-bottom-color: 아래쪽 선 색상 border-left-color: 왼쪽 선 색상 border-color: 상하좌우 색상을 한번에 지정.
border	위 테두리 속성을 한꺼번에 지정함. 속성 값은 <두께> | <스타일> | <색상>을 지정. border-top: 상단 테두리 지정. border-right: 오른쪽 테두리 지정. border-bottom: 아래쪽 테두리 지정. border-left: 왼쪽 테두리 지정. border: 위 속성을 한번에 지정.

<style>
.hh1 {
  /* 테두리 두께 5px, 스타일은 실선, 색상은 빨간색 */
  border: 5px solid red;
}
.hh2 {
  /* 테두리 두께 4px, 스타일은 도트, 색상은 파란색 */
  border: 4px dotted blue;
}
.hh3 {
  border: double;
}
</style>

<div class="hh1">하보니 PHP</div>
<div class="hh2">하보니 PHP</div>
<div class="hh3">하보니 PHP</div>