[HTML/CSS] div 박스에 테두리(border)

요소 테두리(border) 설정

border 속성은 요소에 테두리를 추가하는 데 사용됩니다. 

 

border 사용 예제

<div style="border:5px solid">
  동해물과 백두산이 마르고 닳도록
</div>

 

테두리 스타일(border-style)

 

• none : 테두리가 나타나지 않으며 기본값입니다.
• hidden : 모든 테두리를 감춥니다.
• solid : 테두리가 실선으로 표시됩니다.
• double : 테두리가 이중선(겹선)으로 표시됩니다.
• groove : 테두리 선이 입체적으로 표시됩니다.
• ridge : groove의 음영값이 반대로 표시됩니다.
• inset : 테두리 요소가 안으로 표시됩니다.
• outset : 테두리 요소가 밖으로 표시됩니다.
• dashed : 테두리가 바느질선으로 표시됩니다.
• dotted : 테두리가 점선으로 표시됩니다.

테두리 두께(border-width)

• medium : 중간 두께의 테두리를 설정합니다. (기본값)
• thin : 얇은 테두리를 설정합니다.
• thick : 두꺼운 테두리를 설정합니다.
• px :픽셀 단위로 테두리 지정

HTML

<div class="box1">네 방향 테두리 5px</div>
<div class="box2">위,아래(얇게) 왼쪽,오른쪽(굵게)</div>
<div class="box3">위,오른쪽,아래,왼쪽 각각 설정</div>

CSS

/* 네 방향 테두리 5px */
.box1{ 
  border-width:5px; 
  border-style:solid;
}

/* 위 아래 얇게(thin) 왼쪽, 오른쪽 굵게(thick) */
.box2{ 
  border-width:thin thick; 
  border-style:solid;
}

/* 위 오른쪽 아래 왼쪽 각각 5, 10, 15, 20px */
.box3{
  border-width:5px 10px 15px 20px;
  border-style:solid;
}

div{ height:50px; margin:10px; }

 

테두리 색상 (border-color)

• border-color : 테두리 색상 지정하기
• border-top-color : 위쪽 테두리 색상 지정하기
• border-right-color : 오른쪽 테두리 색상 지정하기
• border-bottom-color : 아래쪽 테두리 색상 지정하기
• border-left-color : 왼쪽 테두리 색상 지정하기

HTML

<div class="box1">전체 테두리 색상</div>
<div class="box2">위쪽 테두리 색상</div>
<div class="box3">오른쪽 테두리 색상</div>
<div class="box4">아래쪽 테두리 색상</div>
<div class="box5">왼쪽 테두리 색상</div>

CSS

.box1{ border-color:red; border-style:solid;}
.box2{ border-top-color:blue; border-style:solid;}
.box3{ border-right-color:#FF0000; border-style:solid;}
.box4{ border-bottom-color:#0000FF; border-style:solid;}
.box5{ 
  border-left-color:rgb(255,0,0); 
  border-style:solid;
}

div{ height:50px; margin:10px; }

테두리 둥글게 만들기 (border-radius)

• border-radius : 모서리 전체 둥글기 지정하기
• border-top-left-radius : 좌측 상단 모서리 둥글기 지정하기
• border-top-right-radius : 우측 상단 모서리 둥글기 지정하기
• border-bottom-left-radius : 좌측 하단 모서리 둥글기 지정하기
• border-bottom-right-radius : 우측 하단 모서리 둥글기 지정하기