동영상 강좌보기

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

테두리 스타일

border-style속성은 어떤 종류의 테두리를 표시할 지 지정합니다.

• dotted - 점선 테두리를 정의합니다.
  
• dashed - 점선(대시--긴점선) 테두리를 정의합니다.
  
• solid - 단색 테두리를 정의합니다.(속이 꽉찬)
  
• double - 이중 테두리를 정의합니다.
  
• groove - 3D 그루브 경계를 정의합니다. 효과는 테두리 색값에 따라 다릅니다.
  
• ridge - 3D 융기테두리를 정의합니다. 효과는 테두리 색값에 따라 다릅니다.
  
• inset - 3D 삽입 테두리를 정의합니다. 효과는 테두리 색값에 따라 다릅니다.
  
• outset - 3D 시작테두리를 정의합니다. 효과는 테두리 색값에 따라 다릅니다.
  
• none - 테두리 없음 정의
  
• hidden - 숨겨진 테두리를 정의합니다.
  

border-style속성은 1~4개의 값(위쪽, 아래쪽, 왼쪽, 오른쪽)을 설정할 수 있습니다.

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;}

** border-style속성이 설정되어 있지 않으면 아래에 설명되는 다른 CSS테두리 속성중 아무 것도 효과가 없습니다.

테두리 너비

border-width속성은 네 개(위쪽, 아래쪽, 왼쪽, 오른쪽)의 테두리의 너비를 지정합니다.

속성의 값은 PX, PT, cm, EM, 등으로 설정할 수 있습니다.

p.one {
    border-style: solid;
    border-width: 5px;
}

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

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

테두리 색

border-color속성은 네 개의 테두리 색상을 설정하는데 사용됩니다.

색상은 다음과 같이 설정할 수 있습니다.

• name - "red"와 같은 색이름(영문)
  
• Hex - "#ff0000"과 같이 16진수값을 지정합니다.
  
• RGB - rgb(255,0,0)와 같이 RGB값을 지정합니다. 
  
• 투명(transparent)
  

border-color속성은 1~4개의 값(위쪽, 아래쪽, 왼쪽, 오른쪽)을 지정할 수 있습니다.

border-color를 설정하지 않으면 상속을 받습니다.

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

테두리 - 개별 적용

위의 예를 통해 각면(위, 아래, 왼쪽, 오른쪽)에 다른 테두리를 지정할 수 있음을 알았습니다.

CSS에는 각 테두리를 지정하는 속성도 있습니다.

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

위의 예는 다음과 같은 결과를 제공합니다.

p {
    border-style: dotted solid;
}

그래서 그것이 작동하는 방법은 다음과 같습니다.

border-style속성 값이 네개인 경우

border-style: dotted solid double dashed; 

• top-border : dotted
  
• right-border : solid
  
• bottom-border : double
  
• left-border : dashed
  

border-style속성 값이 세 개인 경우

border-style : dotted solid double;

• top-border : dotted
  
• right and left-border : solid
  
• bottom-border : double
  

border-style속성 값이 두 개인 경우

border-style : dotted solid;

• top and bottom-border : dotted
  
• right and left-border : solid
  

border-style속성 값이 한 개인 경우

border-style : dotted;

• top and bottom and right and left-border : dotted
  

테두리 - 속기 속성

위의 예제에서 볼 수 있듯이 테두리를 처리할 때 고려해야 할 많은 속성이 있습니다.

코드를 단축하기 위해 하나의 속성에 모든 개별 테두리 속성을 지정할 수도 있습니다.

border속성은 border-width, border-style, border-color에 대한 속기 속성입니다.

p {
    border: 5px solid red;
}

한면에 대한 모든 개별 테두리 속성을 지정할 수도 있습니다.

왼쪽 테두리

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

아래쪽 테두리

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

둥근 테두리

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

p {
    border: 2px solid red;
    border-radius: 5px;
}

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