1. border

---

• border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정한다.

2. border-style 속성

---

1) none

• 테두리를 없앤다.

.dotted {
    border-style: none;
}

2) solid

• solid 테두리를 실선으로 설정한다.

.dotted {
    border-style: solid;
}

3) dotted

• 테두리를 점선으로 설정한다.

.dotted {
    border-style: dotted;
}

4) dashed

• 테두리를 약간 긴 점선으로 설정한다.

.dotted {
    border-style: dashed;
}

5) double

• 테두리를 이중 실선으로 설정한다.

.dotted {
    border-style: double;
}

6) groove

• 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받는다.

.dotted {
    border-style: groove;
}

7) ridge

• 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받는다.

.dotted {
    border-style: ridge;
}

8) inset

• 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받는다.

.dotted {
    border-style: inset;
}

9) outset

• 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받는다.

.dotted {
    border-style: outset;
}

10) hidden

• 테두리가 존재하기는 하지만 표현되지 않도록 한다.

.dotted {
    border-style: hidden;
}

3. border-width 속성

---

• border-width 속성은 테두리(border)의 두께를 설정한다. px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있다.

• 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있다.

1) thin

.thin {
    border-style: solid;
    border-width: thin;
}

2) medium

.medium {
    border-style: solid;
    border-width: medium;
}

3) thick

.thick {
    border-style: solid;
    border-width: thick;
}

4) number

.two {
    border-style: solid;
    border-width: 2px;
}

.ten {
    border-style: solid;
    border-width: 10px;
}

4. border-color 속성

---

• border-color 속성은 테두리(border)의 색상을 설정한다. 기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있다.

• border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받는다.

.red {
    border-color: red;
}

.green {
    border-color: rgb(0, 255, 0);
}

.blue {
    border-color: #0000FF;
}

.mix {
    border-color: red green blue maroon;
}

.color {
    color: teal;
}

5. border 개별 설정

---

• 테두리의 위쪽, 오른쪽, 아래쪽, 왼쪽 부분에 대하여 개별적으로 스타일을 적용할 수 있다. 4개의 border-style 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
.div.mix {
    border-style: dotted dashed solid double;
}

.div.mix {
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: double;
}

• 3개의 border-style 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
.div.mix {
    border-style: dotted dashed solid;
}

.div.mix {
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: dashed;
}

• 2개의 border-style 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
.div.mix {
    border-style: dotted dashed;
}

.div.mix {
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: dashed;
}

• 1개의 border-style 속성값을 가질 때는 모든 테두리의 스타일을 같게 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
.div.mix {
    border-style: dotted;
}

.div.mix {
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
}

6. border 축약 표현

---

• 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

.good {
    border: 3px solid teal;
}

.wrong {
    border: 5px teal;
}