13) CSS 속성 - border

border 속성은 요소의 테두리에 관련된 속성을 지정할 때 사용합니다.

테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며,

background 속성처럼 여러 속성을 축약하여 적용할 수도 있습니다.

 

 

border 관련 속성

• border-width

기본 값 : medium 선의 굵기를 지정하는 속성입니다. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다.

border-width: [top] [right] [bottom] [left];

 

< 속성 값 >

키워드	thin, medium, thick
단위	px, em, rem ... ( % , 정수 단위 사용불가 )

 

• border-style 기본 값 :  none 선의 모양을 지정하는 속성입니다. border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있습니다.

border-style: [top] [right] [bottom] [left];

또한, 위처럼 축약하여 공백을 이용해 각 방향에 대한 스타일을 지정할 수도 있습니다.

 

< 속성 값 >

none	border를 표시 하지 않습니다.
solid	border를 실선 모양으로 나타냅니다.
double	border를 이중 실선 모양으로 나타냅니다.
dotted	border를 점선 모양으로 나타냅니다.

그 밖에도 dashed, double, groove, ridge, inset, outset 등의 다양한 스타일이 있습니다.

 

 

• border- color 기본 값 : currentColor 선의 색상을 지정하는 속성입니다. border-top-color, border-bottom-color, border-right-color, border-left-color를 이용하여 상하좌우 선의 색상을 다르게 표현할 수 있습니다.

border-color: [top] [right] [bottom] [left];

또한, 위처럼 축약하여 공백을 이용해 각 방향의 색상을 지정할 수도 있습니다. 색상은 일반적인 CSS 색상 값 사용 방식과 같습니다. 

 

• border 축약

border: [-width] [-style] [-color];

위와 같이 공백으로 구분해 축약하여 사용할 수 있고, 정의되지 않은 속성값에 대해서는 기본값이 적용됩니다.