Border
Border는 테두리(라인)를 의미합니다.
디자인적 요소로 많이 사용되어 지고있으며 박스형태의 모양을 만들때 사용되어집니다.
Border의 속성은 Margin과 Padding과 마찬가지로 Top, Right, Bottom, Left 가 존재하며,
자체적 간격 조정은 없습니다.
디자인 요소이기 때문에 테두리(라인)의 두께나 색상, 그리고 모양의 속성을 적용 할 수 있습니다.
Border 속성
border-color : 테두리(라인)의 색상
border-top-color: #FF0000;
border-style : 테두리(라인)를 어떤 스타일로 할것인지 (ex, 점선, 실선, 라인)
border-top-stle: solid;
border-top-stle: dotted;
border-top-stle: dashed;
border-width : 테두리(라인)의 두께
border-top-width: 1px;
TIP
이 많은 속성들을 개별적으로 적용한다면 선만 긋다 시간 다 보내겠죠?
Margin 이나 Padding 처럼 이 많은 속성들 또한 축약해서 하나로 묶어서 사용 가능합니다.
테두리 모두 적용하기
border: 1px solid #FF0000;
테두리 위쪽만 적용하기
border-top: 1px solid #FF0000;
테두리 오른쪽만 적용하기
border-right: 1px solid #FF0000;
테두리 아래쪽만 적용하기
border-left: 1px solid #FF0000;
테두리 왼쪽만 적용하기
border-left: 1px solid #FF0000;
Border의 형태는 직각으로만 표현이 가능하며,
둥근 모서리 형태의 Border는 CSS3에서는 존재합니다.
CSS3는 IE9(익스플로러9) 이상에서만 지원하며,
사파리, 크롬, 파이어폭스, 오페라 등의 표준 브라우저에서만 적용가능합니다.