[ CSS 입문 ] border 속성

728x90

| 개요

border 속성은 태그의 테두리를 설정하는 속성으로, background속성 과 비슷하게 세부적인 속성들을 한번에 사용할 수 있습니다.

예전부터 지금까지도 많이 사용되는 table태그에서의 border와 비슷한 세부 속성을 가지고 있으며 이제 테이블이 아닌 다른 객체에서도 border 속성을 이용하여 문서나 표를 작성 할 수 있습니다.

주로 " border: 선두께 선스타일 선색상; "의 순서로 작성되며 전체의 테두리가 아니라면 각 방향별로 따로 테두리를 줄 수 있습니다.

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

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

A solid border

A dotted border

A dashed border

A double border

A groove border

A ridge border

A inset border

A outset border

A hidden border

테두리의 색상을 지정하는 속성입니다. 색상은 기존 color속성 과 같은 방식으로 선택이 가능하며, 그라디언트 색상을 넣을 수 있는데 background속성 과 마찬가지로 'border-image' 속성으로 넣을 수 있습니다.

테두리의 각 모서리 부분을 부드러운 곡선으로 변경할 수 있는 속성으로 인쇄물로 따지면 '귀도리'라는 효과와 같다고 할 수 있다. 테두리의 각진 모습이 싫다고 한다면 이 속성을 이용해 단위는 주로 px이 사용되지만 다른 단위도 사용이 가능하다.

숫자가 크면 클수록 원에 가까워지고 모서리는 이전 margin, padding속성 과 같이 각 모서리별로 별도로 값을 줄 수 있다.

순서는 '왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래' 가 되겠다.

normal border

border-radius 10px

border-radius 10px 2px

border-radius 0 10px 10px 0

728x90