[CSS] border 속성 정리(border-width, border-style, border-color)

border 관련 CSS 속성

border는 아래의 하위 속성을 포함한다.

- border-width
- border-style
- border-color

 

---

border-width

border-width 속성은 border의 두께를 설정
default 값은 medium

 

/* 키워드 값 */
border-width: thin | medium | thick;

/* <length> 값 */
border-width: 1px;

/* top and bottom | left and right */
border-width: 1px 5px;

/* top | left and right | bottom */
border-width: 1px 3px 5px;

/* top | right | bottom | left */
border-width: 1px 3px 5px 7px;

/* Global values */
border-width: inherit | initial | unset;

 

See the Pen Untitled by Eunji Jeon (@emcjrl) on CodePen.

 

 

 

 

---

border-style

border-style 속성은 border의 형태를 설정

default 값은 none

 

/* Keyword values */
border-style: none;  /* 테두리 없음 */ 
border-style: hidden;  /* 테두리가 존재하지만 표현되지는 않음 */ 
border-style: dotted;  /* 테두리를 점선으로 설정 */ 
border-style: dashed;  /* 테두리를 대시기호(-)로 설정 */ 
border-style: solid;  /* 테두리를 실선으로 설정 */ 
border-style: double;  /* 테두리를 이중실선으로 설정 */ 
border-style: groove;  /* 테두리를 3차원인 파인 홈으로 설정 */ 
border-style: ridge;  /* 테두리를 3차원인 능선효과로 설정 */ 
border-style: inset;  /* 테두리 내부가 안으로 들어간 효과로 설정 */
border-style: outset;  /* 테두리 내부가 밖으로 나온 효과로 설정 */

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit | initial | revert | revert-layer | unset;

 

See the Pen Untitled by Eunji Jeon (@emcjrl) on CodePen.

 

 

 

 

---

border-color

border-color속성은 border의 컬러를 설정

default 값은 black (or inherit)

 

/* <color> values */
border-color: Brown;

/* top and bottom | left and right */
border-color: DarkGoldenRod #228b22;

/* top | left and right | bottom */
border-color: DarkGoldenRod rgb(255, 127, 80) #006400;

/* top | right | bottom | left */
border-color: DarkGoldenRod BlueViolet DarkGreen Coral;

/* Global values */
border-color: inherit | initial | revert | revert-layer | unset;

 

See the Pen Untitled by Eunji Jeon (@emcjrl) on CodePen.

 

 

 

---

⭐ border

border는 단축 속성으로

border-width, border-style, border-color를 한번에 지정할 수 있다.

 

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: dashed #ff7f50;

/* width | style | color */
border: 5px double ForestGreen;

/* Global values */
border: inherit | initial | revert | revert-layer | unset;

 

See the Pen Untitled by Eunji Jeon (@emcjrl) on CodePen.