ToDoDoDo

CSS Borders

CSS 테두리(border)

CSS border 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다.

나는 모든 면에 테두리를 가지고 있어요.
나는 아래쪽에만 빨간 테두리를 가지고 있어요.
나는 모서리가 둥그스름한 테두리를 가지고 있어요.
나는 파랑색 테두리를 왼쪽에만 가지고 있어요.



테두리 스타일(border-style)

border-style 속성은 어떤 종류의 테두리를 표시할지 지정합니다.
이 스타일의 종류는 다음과 같이 제공됩니다.

스타일명 실제 보여지는 모양 부연설명
dotted 점선
dashed 대시
solid 직선
double 두줄선
groove 3D로 테두리가 홈이 패인듯한 모양
ridge 3D로 테두리가 봉오리로 솟아오른듯한 모양
inset 3D로 전체적으로 안으로 들어간듯한 모양
outset 3D로 전체적으로 튀어나온 듯한 모양
none 보통의 border가 없는 상태. 테두리 없음입니다.
hidden 기본적으론 none과 같지만 아래에 기술된것처럼 table에 존재할때 차이가 발생합니다.

`border-style` 에서 `none` 과 `hidden` 값의 차이

테두리를 가지는 평범한 셀 테두리가 `none` 인 셀
테두리를 가지는 평범한 셀 테두리가 `hidden` 인 셀
<table>
  <tr style="border-top: 1px solid #dfe2e5;">
    <td style="border: 3px solid #000;">테두리를 가지는 평범한 셀</td>
    <td style="border: 3px none #000 !important;">테두리가 `none` 인 셀</td>
  </tr>
</table>

<table>
  <tr style="border-top: 1px solid #dfe2e5;">
    <td style="border: 3px solid #000;">테두리를 가지는 평범한 셀</td>
    <td style="border: 3px hidden #000;">테두리가 `hidden` 인 셀</td>
  </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13

이 차이에 대해서는 w3 기술문서에서도 나타내고 있습니다.
Border conflict resolution




다음은 실제 사용의 예입니다.

dotted 테두리

dashed 테두리

solid 테두리

double 테두리

groove 테두리

ridge 테두리

inset 테두리

outset 테두리

none 테두리

mixed 테두리

<!DOCTYPE html>
<html>
<head>
<style>
  p.dotted {border-style: dotted;}
  p.dashed {border-style: dashed;}
  p.solid {border-style: solid;}
  p.double {border-style: double;}
  p.groove {border-style: groove;}
  p.ridge {border-style: ridge;}
  p.inset {border-style: inset;}
  p.outset {border-style: outset;}
  p.none {border-style: none;}
  p.hidden {border-style: hidden;}
  p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
  <p class="dotted">dotted 테두리</p>
  <p class="dashed">dashed 테두리</p>
  <p class="solid">solid 테두리</p>
  <p class="double">double 테두리</p>
  <p class="groove">groove 테두리</p>
  <p class="ridge">ridge 테두리</p>
  <p class="inset">inset 테두리</p>
  <p class="outset">outset 테두리</p>
  <p class="none">none 테두리</p>
  <p class="hidden">hidden 테두리</p>
  <p class="mix">mixed 테두리</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

전체 소스로 실습하기

기본적으로 border-style 에 대한 속성이 기술되어있지 않으면 테두리(border)에 대한 다른 어떤 효과도 적용되지 않습니다.
아래에도 기술되어있지만 border-style 은 border 의 약기(shorthand) 로도 작성할 수 있습니다.




테두리 두께(border-width)

border-width 속성은 상하좌우 네 개의 테두리의 두께를 지정합니다.
border-width는 특정 크기 (px, pt, cm, em 등) 또는 미리 정의 된 세 가지 값 중 하나 인 thin, medium, thick 중 하나를 사용하여 설정할 수 있습니다.
border-width 속성은 1~4 개의 값 (위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리, 왼쪽 테두리)으로 작성할 수도 있습니다.
border-width 속성은 2개쌍의 값 (위아래 테두리, 좌우 테두리)으로 작성할 수도 있습니다.

solid 5px

solid medium

dotted 2px

dotted thick

double 15px

double thick

solid 2px 10px 4px 20px

solid 1px 10px

<!DOCTYPE html>
<html>
<head>
  <style>
    p.one {
      border-style: solid;
      border-width: 5px;
    }

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

    p.three {
      border-style: dotted;
      border-width: 2px;
    }

    p.four {
      border-style: dotted;
      border-width: thick;
    }

    p.five {
      border-style: double;
      border-width: 15px;
    }

    p.six {
      border-style: double;
      border-width: thick;
    }

    p.seven {
      border-style: solid;
      border-width: 2px 10px 4px 20px;
    }

    p.eight {
      border-style: solid;
      border-width: 1px 10px;
    }
  </style>
</head>
<body>
  <p class="one">solid 5px</p>
  <p class="two">solid medium</p>
  <p class="three">dotted 2px</p>
  <p class="four">dotted thick</p>
  <p class="five">double 15px</p>
  <p class="six">double thick</p>
  <p class="seven">solid 2px 10px 4px 20px</p>
  <p class="eight">solid 1px 10px</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

전체 소스로 실습하기

border-width 속성은 혼자 사용되어질 수 없습니다.
border-style 속성과 함께 사용되어져야 합니다.
border-width 가 정의되지 않으면 브라우저에 기본정의된 두께로 설정됩니다.





테두리 색(border-color)

border-color 속성은 네 개의 테두리의 색상을 설정하는 데 사용됩니다.
사용할 수 있는 color 의 종류는 다음과 같습니다.

  • "red"와 같은 색상 이름을 지정합니다.
  • "#ff0000" 과 같은 hex 값
  • rgb(255,0,0) 과 같은 RGB 값
  • 투명(transparent)색

border-color 속성은 1~4 개의 값 (위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리, 왼쪽 테두리)을 가질 수 있습니다.
border-color가 설정되어 있지 않으면, 요소가 미리 정의된 기본 색상을 상속받습니다.

solid red

solid green

solid red green blue yellow

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p style="border-style: solid; border-color: red;">solid red</p>
  <p style="border-style: solid; border-color: green;">solid green</p>
  <p style="border-style: solid; border-color: red green blue yellow;">
    solid red green blue yellow
  </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

전체 소스로 실습하기





각 방향별 테두리(border-*)

위의 예제를 통해 각변에 다른 테두리를 지정할 수 있음을 알았습니다.
CSS에는 각 테두리(위, 오른쪽, 아래, 왼쪽)를 하나씩 지정하는 속성도 있습니다.

상하와 좌우가 각각 다른 border-style을 가지는 테두리

<!DOCTYPE html>
<html>
<head>
  <style>
    .each-other-border {
      border-top-style: dotted;
      border-right-style: solid;
      border-bottom-style: dotted;
      border-left-style: solid;
    }
  </style>
</head>
<body>
  <p class="each-other-border">상하와 좌우가 각각 다른 border-style을 가지는 테두리</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

전체 소스로 실습하기


같은 모양을 4방향을 따로따로 지정하는게 아닌 2개로(상하, 좌우) 표현하는 방법도 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .each-other-border {
      border-style: dotted solid;
    }
  </style>
</head>
<body>
  <p class="each-other-border">상하와 좌우가 각각 다른 border-style을 가지는 테두리</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

전체 소스로 실습하기





1~4 개로 작성되는 border-* 값들

border-style
border-width
border-color
위 3가지의 속성값들이 가지는 값에는 1~4 개의 속성값을 넣는 방법이 존재합니다.
아래에서 넣는 각 갯수별로 어떻게 동작하는지 알아봅니다.
border-style, border-width, border-color 모두 동일하게 동작하므로
border-style 을 기준으로 기술합니다.


1개로 작성했을때
4방향이 모두 같은 값을 가집니다.

값을 1개 넣었을때

<div style="border-style: solid">값을 1개 넣었을때</div>
1


2개로 작성했을때 위아래, 좌우 값을 가집니다.
값을 2개 넣었을때
<div style="border-style: solid dotted">값을 2개 넣었을때</div>
1


3개로 작성했을때 위, 좌우, 아래 값을 가집니다.
값을 3개 넣었을때
<div style="border-style: solid dotted dashed">값을 3개 넣었을때</div>
1


4개로 작성했을때 위, 오른쪽, 아래, 왼쪽 값을 가집니다.(시계방향)
값을 4개 넣었을때
<div style="border-style: solid dotted dashed double">값을 4개 넣었을때</div>
1




테두리 shorthand - 한줄로 작성하기

위의 예에서 볼 수 있듯이 테두리를 처리 할 때 고려해야 할 많은 속성이 있습니다.
코드를 단축하려면 하나의 속성에 모든 개별 테두리 속성을 지정할 수도 있습니다.
border 속성은 다음과 같은 개별 테두리 속성의 shorthand property 입니다.

  • border-width
  • border-style (반드시 필요)
  • border-color

Example

이 속성은 두께, 스타일, 색상 을 모두 지정했습니다.

이 속성은 스타일만 지정했습니다.

이 속성은 스타일과 색상만 지정했습니다.

이 속성은 색상만 지정했습니다. 스타일이 없어서 테두리가 구현되지 않습니다.


<p style="border: 5px solid red;">이 속성은 두께, 스타일, 색상 을 모두 지정했습니다.</p>
<p style="border: solid;">이 속성은 스타일만 지정했습니다.</p>
<p style="border: solid red;">이 속성은 스타일과 색상만 지정했습니다.</p>
<p style="border: red;">이 속성은 색상만 지정했습니다. 스타일이 없어서 테두리가 구현되지 않습니다.</p>
1
2
3
4

전체 소스로 실습하기


한변만(border-left, border-right, border-top, border-bottom) 모든 개별 테두리 속성을 지정할 수도 있습니다.

Example

이 속성은 두께, 스타일, 색상 을 모두 지정했습니다.

이 속성은 스타일만 지정했습니다.

이 속성은 스타일과 색상만 지정했습니다.

이 속성은 색상만 지정했습니다. 스타일이 없어서 테두리가 구현되지 않습니다.


<p style="border-left: 5px solid red;">이 속성은 두께, 스타일, 색상 을 모두 지정했습니다.</p>
<p style="border-left: solid;">이 속성은 스타일만 지정했습니다.</p>
<p style="border-left: solid red;">이 속성은 스타일과 색상만 지정했습니다.</p>
<p style="border-left: red;">이 속성은 색상만 지정했습니다. 스타일이 없어서 테두리가 구현되지 않습니다.</p>
1
2
3
4

전체 소스로 실습하기





둥글게(round) 처리된 테두리

border-radius 속성은 둥근 테두리를 요소에 추가하는 데 사용됩니다.

테두리에 5px 만큼의 round

테두리에 10px 만큼의 round

테두리에 20px 만큼의 round

테두리에 50% 만큼의 round

둥근모양
<p style="border: 5px solid red;border-radius: 5px;">테두리에 5px 만큼의 round</p>
<p style="border: 5px solid red;border-radius: 10px;">테두리에 10px 만큼의 round</p>
<p style="border: 5px solid red;border-radius: 20px;">테두리에 20px 만큼의 round</p>
<p style="border: 5px solid red;border-radius: 50%;">테두리에 50% 만큼의 round</p>
<div style="display:inline-block;width:100px;height:100px;border: 5px solid red;border-radius: 50%;">둥근모양</div>
1
2
3
4
5


border-radius 속성은 IE8 및 이전 버전에서는 지원되지 않습니다.

← CSS margin →