1. 테두리 스타일
① border-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset;
② border-위치-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset;
- border-style: none; : 테두리에 어떠한 스타일도 넣지 않는다.
- border-style: dotted; : 얇고 동그란 점선
- border-style: dashed; : 얇은 점선
- border-style: solid; : 굵은 실선
- border-style: double; : 두 줄로 된 실선
- border-style: groove; : 액자 모양으로 된 바깥쪽 그림자가 진 선
- border-style: ridge; : 액자 모양으로 된 안쪽 그림자가 진 선
- border-style: inset; : 오른쪽에서 왼쪽을 가로지르는 대각선을 기준으로 왼쪽이 그림자가 진 선
- border-style: outset; : 오른쪽에서 왼쪽을 가로지르는 대각선을 기준으로 오른쪽이 그림자가 진 선
2. 테두리 두께
① border-width: 값;
② border-위치-width: 값;
3. 테두리 색상
① border-color: 색상;
② border-위치-color: 색상;
4. 테두리 색상과 두께 한번에 지정
- border-위치: 두께값 색상;
- 색상을 생략하면 글자색으로 테두리색이 정해진다.
5. 테두리 모서리를 둥글게 하기
- border-위/아래-좌/우-radius: 숫자(px);
- 위치를 생략하면 모서리 전체가 둥글게 된다.
6. 텍스트 박스에 그림자 효과 넣기
- box-shadow: 가로거리 세로거리 흐림정도 번짐정도 색상;
** 위치: 위(top), 아래(bottom), 좌(left), 우(right)로 작성하며, 생략이 가능하다.