border 속성의 이해

border 속성은
요소 경계 테두리의 너비, 스타일, 색상을 지정합니다.
이 속성은 요소의 네 경계면(위, 아래, 왼쪽, 오른쪽) 테두리를 한 번에 설정할 수 있습니다.

border 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

border 속성의 구성 속성
border-width 요소 테두리의 두께, 즉 너비를 지정합니다.
border-style 요소의 경계에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
border-color 요소 테두리의 색상을 지정합니다.

데모

다음의 CSS 데모로 border 속성의 사용 방법을 확인해 보세요.

CSS 데모: border 데모 버튼을 클릭해 보세요!

border 속성은 요소 경계의 네 테두리를 동일하게 설정하고 싶을 때 유용합니다.

한 쪽 면의 테두리를 설정하려면 다음의 속성을 사용하세요.

한 면의 테두리를 설정하는 속성들
border-top 요소의 위쪽 테두리를 설정합니다.
border-bottom 요소의 아래쪽 테두리를 설정합니다.
border-left 요소의 왼쪽 테두리를 설정합니다.
border-right 요소의 오른쪽 테두리를 설정합니다.

형식 구문

CSS 
selector {
    border: <line-width> || <line-style> || <color>
            /* 너비 || 스타일 || 색상 */
            /* 값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다. */
}

구문

CSS 
/*
 * border 속성 값
 * 아래에 나열된 값 중 하나, 둘 또는 셋을 사용하여 지정할 수 있습니다.
 * 값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다.
*/

/* <line-style> */
border: none;
border: solid;
border: double;

/* <line-width> | <line-style>  */
border: 2px dotted;
border: 1em inset;
border: thin inset;

/* <line-style> | <color> */
border: dashed red;
border: rgba(0, 0, 0, 0.5) dashed;

/* <line-width> | <line-style> | <color> */
border: 10px solid #fddd9b;
border: 10px #fddd9b solid;

/* 전역 값 */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;

값

  • 아래에 나열된 값 중 하나, 둘 또는 셋을 사용하여 지정할 수 있습니다.
  • 값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다.
  • 다른 단축 속성(shorthand property)과 마찬가지로 값을 지정하지 않으면(생략하면) 해당하는 속성의 초깃값이 적용됩니다.

<line-style>은 필수로 지정해야 합니다.
지정하지 않으면 초깃값인 none이 적용되어 테두리가 나타나지 않습니다.

<line-width>

요소 테두리의 두께, 즉 너비를 지정합니다. border-width의 값에 해당합니다.
초깃값은 medium입니다.

<길이> 값

길이 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위
  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위

주의하세요!
border-width의 값에는 퍼센트(%) 단위 값을 사용할 수 없습니다.

당연하지만, <길이> 단위 값이 0으로 지정되면 테두리가 나타나지 않습니다.

  • thin - 가는 두께
  • medium - 보통 두께(초깃값임)
  • thick - 굵은 두께

명세서에서 각 키워드 값은 정확한 두께를 정의하고 있지 않습니다. 하지만, thin ≤ medium ≤ thick의 두께 패턴은 항상 유지합니다.

예제
HTML 
<p class="thin">thin</p>
<p class="medium">medium</p>
<p class="thick">thick</p>
CSS 
.thin {
    border: thin solid;
}
.medium {
    border: medium solid;
}
.thick {
    border: thick solid;
}
실제 적용된 모습

<line-style>

요소의 경계에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다. border-style의 값에 해당합니다.
초깃값은 none입니다.

초깃값입니다. 테두리를 표시하지 않습니다.
<line-width> 값이 지정되어 있더라도 무시되고 계산된 값은 0이 됩니다.

테이블의 셀과 테두리가 border-collapse: collapse(상쇄된 테두리 표)일 경우 값의 우선순위가 가장 낮습니다. 겹쳐진 다른 테두리가 설정된 경우에는 표시됩니다.

none 값과 마찬가지로 테두리를 표시하지 않습니다.
<line-width> 값이 지정되어 있더라도 무시되고 계산된 값은 0이 됩니다.

하지만, none 값과는 다르게 테이블의 셀과 테두리가 border-collapse: collapse(상쇄된 테두리 표)일 경우 값의 우선순위가 가장 높습니다. 겹쳐진 다른 테두리가 설정된 경우에도 표시되지 않습니다.

둥근 점이 간격을 두고 연속적으로 표시됩니다. 점의 간격은 명세서에 정의되어 있지 않습니다.

예제
HTML 
<p class="dotted">dotted</p>
CSS 
.dotted {
    border: dotted 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

직사각형이 간격을 두고 연속적으로 표시됩니다. 사각형의 크기와 간격은 명세서에 정의되어 있지 않습니다.

예제
HTML 
<p class="dashed">dashed</p>
CSS 
.dashed {
    border: dashed 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

직선으로 표시됩니다.

예제
HTML 
<p class="solid">solid</p>
CSS 
.solid {
    border: solid 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

두 개의 평행한 직선으로 표시됩니다.

예제
HTML 
<p class="double">double</p>
CSS 
.double {
    border: double 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

테두리가 오목하게 파인 것처럼 표시됩니다. ridge 값과 반대로 표시됩니다.

예제
HTML 
<p class="groove">groove</p>
CSS 
.groove {
    border: groove 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

테두리가 볼록하게 튀어나온 것처럼 표시됩니다. groove 값과 반대로 표시됩니다.

예제
HTML 
<p class="ridge">ridge</p>
CSS 
.ridge {
    border: ridge 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

테두리로 인해 요소가 테두리 안쪽으로 박혀있는 것처럼 표시합니다. outset 값과 반대로 표시됩니다.

예제
HTML 
<p class="inset">inset</p>
CSS 
.inset {
    border: inset 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

테두리로 인해 요소가 테두리 안쪽에서 볼록 튀어나온 것처럼 표시합니다. inset 값과 반대로 표시됩니다.

예제
HTML 
<p class="outset">outset</p>
CSS 
.outset {
    border: outset 7px red;
    background-color: #c2d089;
}
실제 적용된 모습

<color>

<line-style>로 설정된 테두리의 전경색을 지정합니다. CSS에서 지원하는 색상 값입니다.

currentcolor(현재 요소의 글자색)입니다.

예제
HTML 
<p>테두리 색상의 초깃값은 현재 요소의 글자색입니다.</p>
CSS 
p {
    color: red;
    border: 7px solid; /* 테두리 색상은 글자색인 red로 설정된다. */
} 

/* 요소에 마우스를 올려 놓았을 동안에는
   테두리 색상은 글자색인 blue로 설정된다. */
p:hover {
    color: blue;
}

코드 부연설명
:hover 가상 클래스 선택자는 요소에 마우스를 올려 놓았을 동안 해당 요소를 선택합니다.

실제 적용된 모습 요소에 마우스를 올려 보세요.
요소에 마우스를 올려 놓았을 동안에는 테두리 색상은 글자색인 blue로 설정됩니다.

형식 정의

border 속성의 형식 정의
초깃값
  • border-width: medium
  • border-style: none
  • border-color: currentcolor(현재 요소의 글자색)
적용 요소 모든 요소
상속 아니오
애니메이션
  • border-width: 예
  • border-style: 아니오
  • border-color: 예

브라우저의 기본 스타일시트

border 속성의 <line-style> 초깃값은 none입니다. 이것은 요소의 테두리가 나타나지 않는다는 의미입니다.
하지만, 브라우저의 기본 스타일시트에서 border의 값이 별도로 설정되어 있는 요소들이 있습니다. 이 요소들은 테두리가 나타나 있다는 것을 의미합니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

HTML 
<textarea>textarea</textarea>
<hr>
<input type="text" placeholder="text">
<hr>
<input type="number" placeholder="number">
<hr>
<input type="email" placeholder="email">
<hr>
<input type="search" placeholder="search">
<hr>
<input type="tel" placeholder="tel">
<hr>
<input type="url" placeholder="url">
<hr>
<input type="button" value="input button">
<hr>
<input type="reset" value="input reset">
<hr>
<input type="submit" value="input submit">
<hr>
<button>button</button>
<hr>
<select>
    <option>select</option>
</select>
<hr>
<fieldset>
    <legend>fieldset</legend>
</fieldset>
실제 적용된 모습

브라우저 호환성

border 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
border 1 12 1 1

명세서

border 속성의 명세서 사양
명세서 사양
border CSS Backgrounds and Borders Module Level 3
#propdef-border

참고문헌

같이 보기