[CSS] boxmodel - border

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

테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며, 여러 속성을 축약하여 적용할 수도 있다. 

 

border-width

선의 굵기를 지정하는 속성이다. (기본 값 : medium)

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

border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있으며, 위처럼 축약하여 공백을 이용해 각 방향에 대한 선의 굵기를 다르게 지정할 수도 있다. 

 

< 속성 값>

키워드 : thin, medium, thick

단위 : px, em, rem ... (%, 정수 단위 사용불가)

border-style

선의 모양을 지정하는 속성이다. (기본 값 :  none) 지정하지 않으면 선이 보이지 않는다. 

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

border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있다. 

 

< 속성 값>

none : border를 표시하지 않는다. 

solid : border를 실선 모양으로 나타낸다. 

double : border를 이중 실선 모양으로 나타낸다. 

dotted : border를 점선 모양으로 나타낸다. 

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

border-color

선의 색상을 지정하는 속성이다. (기본 값 : currentColor)

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

border-top-color, border-bottom-color, border-right-color, border-left-color를 이용하여 상하좌우 선의 색상을 다르게 표현할 수 있다. 

 

border 축약

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

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

border: 10px solid red;

border: red solid 10px; /* 속성의 순서는 상관 없다. */
border: red double;
border: 10px red; /* style이 기본 값 none으로 적용되어 선이 보이지 않는다. */

속성의 순서는 상관 없다. 

 

See the Pen CSS_border by RIANAEH (@rianaeh) on CodePen.