DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

div 태그에 테두리를 만들고 색깔을 지정해 주기 위해서는 CSS 의 border 속성을 사용합니다.
그런데 border 속성은, div 박스의 상하좌우의 테두리를 한꺼번에 지정합니다. 만약 한쪽 면씩 다른 테두리를 지정하려면 이렇게 방향을 지정해 주어야 합니다.

상 -> border-top 하 -> border-bottom 좌 -> border-left 우 -> border-right

예제 (테두리마다 다른 스타일과 굵기 지정):
<div style="border-top:1px solid; border-bottom:10px solid; border-left:1px dashed; border-right:1px groove; padding:10px;"> 테두리 각기 다른 종류 선 그리기 </div>
결과 : 위쪽 실선, 오른쪽은 입체적인 선, 아래쪽 굵은 선, 왼쪽 점선
 

예제 (테두리마다 다른 색깔 지정): <div style="border-top:2px solid blue; border-bottom:2px solid red; border-left:2px solid chartreuse; border-right:2px solid yellow; padding:10px;"> 테두리마다 다른 색깔 지정 </div>
결과 : 위쪽 파란색, 오른쪽 노란색, 아래쪽 붉은색, 왼쪽 녹색
 

참고자료
http://mwultong.blogspot.com/2006/06/html-css-div-box.html