CSS 입문 | CSS 박스 모델 | 테두리(border)

border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해준다.

CSS border 속성은 다음과 같다.

border-style 속성

border-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있다.

• dotted : 테두리를 점선으로 설정함.
• dashed : 테두리를 약간 긴 점선으로 설정함.
• solid : 테두리를 실선으로 설정함.
• double : 테두리를 이중 실선으로 설정함.
• groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
• ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
• inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
• none : 테두리를 없앰.
• hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

<style>
    .dotted {border-style: dotted;}
    .dashed {border-style: dashed;}
    .solid {border-style: solid;}
    .double {border-style: double;}
    .groove {border-style: groove;}
    .ridge {border-style: ridge;}
    .inset {border-style: inset;}
    .outset {border-style: outset;}
    .none {border-style: none;}
    .hidden {border-style: hidden;}
    .mix {border-style: solid dashed dotted double;}
</style>

border-width 속성

border-width 속성은 테두리(border)의 두께를 설정한다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있다.
또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있다.

<style>
    .dottedA { border-style: dotted; border-width: 2px; }
    .dottedB { border-style: dotted; border-width: 5px; }
    .dashedA { border-style: dashed; border-width: thin; }
    .dashedB { border-style: dashed; border-width: thick; }
    .doubleA { border-style: double; border-width: 5px; }
    .doubleB { border-style: double; border-width: thick; }
    .mix { border-style: solid; border-width: 1px 2px 10px thick; }
</style>

border-color 속성

border-color 속성은 테두리(border)의 색상을 설정한다.
기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있다.
border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받는다.

<style>
    .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; }
</style>

테두리(border)의 개별 설정

CSS를 사용하면 테두리의 위쪽, 오른쪽, 아래쪽, 왼쪽 부분에 대하여 개별적으로 스타일을 적용할 수 있다.

<style>
    .mixA {
        border-top-style: dotted;
        border-right-style: double;
        border-bottom-style: dotted;
        border-left-style: double;
    }
    .mixB { border-style: dotted double; }
</style>

4개의 border-style 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.
ex) border-style: dotted dashed solid double;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid; 
border-style-left: double;

3개의 border-style 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.
ex) border-style: dotted dashed solid;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: dashed;

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

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: dotted; 
border-style-left: dashed;

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

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;  
border-style-right: dotted;  
border-style-bottom: dotted;  
border-style-left: dotted;  

테두리 축약 표현(border shorthand)

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

<style>
    .good { border: 3px solid teal; }
    .wrong { border: 5px teal; }
</style>

border 속성을 설정하기 위해서는 반드시 border-style 속성이 먼저 설정되어 있어야 한다.

CSS3 테두리

CSS3에서는 테두리의 모서리를 둥글게 만들거나, 테두리에 이미지를 사용할 수 있다.

CSS3에서 새롭게 추가된 border 속성은 다음과 같다.

CSS3 테두리(border) 속성 지원 버전

CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

border-radius 속성

CSS3에서는 모든 HTML 요소에 border-radius 속성을 설정하여 모서리를 둥글게 만들 수 있다.

<style>
    #p_01 { height: 150px; width: 200px; border-radius: 25px; }
    #div_01 { height: 150px; width: 200px; border-radius: 25px; }
    #p_02 {
        background: url(/examples/images/img_background_good.png);
        background-position: left top;
        background-repeat: repeat;
        border-radius: 25px;
    }
</style>

border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것이다.
따라서 다음 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있다.

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius

다음 예제는 모서리별로 다른 크기의 둥근 모서리를 설정하는 예제이다

<style>
    #p_01 {
        border-top-left-radius: 20px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 60px;
        border-bottom-left-radius: 80px;
    }
</style>

또한, border-radius 속성을 이용해도 모서리별로 다른 크기의 둥근 모서리를 설정할 수 있다.

<style>
    #p_01 { border-radius: 20px 40px 60px 80px; }
    #p_02 { border-radius: 20px 40px 60px; }
    #p_03 { border-radius: 20px 40px; }
    #p_04 { border-radius: 20px; }
</style>

4개의 border-radius 속성값을 가질 때는 top-left, top-right, bottom-right, bottom-left 순으로 설정된다.
ex) border-radius: 20px 40px 60px 80px; (위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.) border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 60px; border-bottom-left-radius: 80px;

3개의 border-radius 속성값을 가질 때는 top-left, top-right와 bottom-left, bottom-right 순으로 설정된다.
ex) border-radius: 20px 40px 60px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;  
border-top-right-radius: 40px;  
border-bottom-right-radius: 60px;  
border-bottom-left-radius: 40px;  

2개의 border-radius 속성값을 가질 때는 top-left와 bottom-right, top-right와 bottom-left 순으로 설정된다.
ex) border-radius: 20px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;  
border-top-right-radius: 40px;  
border-bottom-right-radius: 20px;  
border-bottom-left-radius: 40px;

1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정된다.
ex) border-radius: 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;  
border-top-right-radius: 20px;  
border-bottom-right-radius: 20px;  
border-bottom-left-radius: 20px;  

border-image 속성

CSS3에서는 요소를 둘러싸는 테두리(border)에 이미지를 사용할 수 있다.

border-image 속성은 다음과 같은 순서로 동작한다.

1. 테두리(border)로 사용할 이미지를 결정한다.
2. 이미지의 어느 부분을 자를 것인지 결정한다.
3. 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정한다.

우선 테두리로 사용할 이미지를 결정한다.

border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눈다.

그 후에 top, right, bottom, left에 해당하는 영역의 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정하게 된다.

다음 예제는 round 속성값을 사용하여 테두리 중간 부분의 처리를 반복으로 설정한 예제이다.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    }
</style>

border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 한다.

다음 예제는 stretch 속성값을 사용하여 테두리 중간 부분의 처리를 늘리는 것으로 설정한 예제이다.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    }
</style>

위의 예제에서 볼 수 있듯이 border-image 속성값으로 전달되는 인수의 기본 단위는 %이다.

또한, 수직 테두리와 수평 테두리의 처리 방식을 다르게 설정할 수도 있다.

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    }
</style>

border-image 속성은 실제로 다음 5가지 속성의 스타일을 한 줄에 설정한 것이다.

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat