border

border

border 속성은 태그의 테두리를 설정하는 속성입니다.

section {
    border : 1px solid #fff; // 두께-스타일-색상 순서
}

border-width

테두리의 두께로, 주로 px 단위를 사용합니다.

section {
    border-width: 1px;
}

border-color

테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다.

section {
    border-color: #000;
}

border-style

테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다.

section {
    border-style: solid;
}

 

• solid
• dotted
• dashed
• double
• groove
• ridge
• inset
• outset
• none

 

방향

테두리의 특정 방향만 따로 설정할 수도 있습니다.

section {
    border-bottom: 2px;
}

• border-bottom : 컨텐츠 하단
• border-top : 컨텐츠 상단
• border-left : 컨텐츠 왼쪽
• border-right : 컨텐츠 오른쪽