border-width 속성의 이해

border-width 속성은
요소 경계 테두리의 두께, 즉 너비를 지정합니다.

이 속성은 요소의 네 경계면(위, 아래, 왼쪽, 오른쪽) 테두리 두께를 한 번에 지정할 수 있는 다음의 구성 속성들의 단축 속성(shorthand property)입니다.
이 속성들을 사용하면 해당하는 한 쪽 면의 테두리 두께를 개별적으로 지정할 수 있습니다.

border-width 속성의 구성 속성
border-top-width 요소 위쪽 테두리의 두께를 지정합니다.
border-bottom-width 요소 아래쪽 테두리의 두께를 지정합니다.
border-left-width 요소 왼쪽 테두리의 두께를 지정합니다.
border-right-width 요소 오른쪽 테두리의 두께를 지정합니다.

border-width 속성은 요소 경계의 네 면의 테두리 두께를 한 번에 설정하고 싶을 때 유용합니다.

데모

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

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

형식 구문

CSS 
selector {
    border-width: <길이>
}

구문

CSS 
/* 네 측면 모두 적용 */
border-width: 20px;
border-width: medium; /* 초깃값 */

/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
border-width: 20px 50px; /* 20px: 위와 아래 측면, 50px: 왼쪽과 오른쪽 측면 */

/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
border-width: 0 50px 20px; /* 0: 위 측면, 50px: 왼쪽과 오른쪽 측면, 20px: 아래 측면 */

/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */ /* 시계 방향으로 */
border-width: 0 10px 30px 50px; /* 0: 위 측면, 10px: 오른쪽 측면, 30px: 아래 측면, 50px: 왼쪽 측면 */

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

값

<길이> 값을 사용할 수 있습니다.
길이 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위

  • 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-style: solid;
    border-width: thin;
}
.medium {
    border-style: solid;
    border-width: medium;
}
.thick {
    border-style: solid;
    border-width: thick;
}

코드 부연설명
border-style 속성은 요소 경계 테두리의 스타일을 지정합니다.

실제 적용된 모습

형식 정의

border-width 속성의 형식 정의
초깃값
  • border-top-width: medium
  • border-bottom-width: medium
  • border-left-width: medium
  • border-right-width: medium
적용 요소 모든 요소
상속 아니오
계산된 값
  • border-top-width: 절대적 <길이>
    (단, border-top-style이 none이나 hidden일 경우에는 0)
  • border-bottom-width: 절대적 <길이>
    (단, border-bottom-style이 none이나 hidden일 경우에는 0)
  • border-left-width: 절대적 <길이>
    (단, border-left-style이 none이나 hidden일 경우에는 0)
  • border-right-width: 절대적 <길이>
    (단, border-right-style이 none이나 hidden일 경우에는 0)
애니메이션
  • border-top-width: 예
  • border-bottom-width: 예
  • border-left-width: 예
  • border-right-width: 예

값 지정하기

border-width 속성은 한 개, 두 개, 세 개, 네 개의 값으로 지정할 수 있습니다.

한 개 값

한 개의 값을 지정하면 이 값이 네 측면 모두에 적용됩니다.

CSS 
/* 네 측면 모두 적용 */
border-width: 20px;
예제
HTML 
<p>border-width 한 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 20px;
}
실제 적용된 모습

두 개 값

두 개의 값을 지정하면 첫 번째는 위와 아래 측면, 두 번째는 왼쪽과 오른쪽 측면에 적용됩니다.

CSS 
/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
border-width: 20px 50px; /* 20px: 위와 아래 측면, 50px: 왼쪽과 오른쪽 측면 */
예제
HTML 
<p>border-width 두 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 20px 50px;
}
실제 적용된 모습

세 개 값

세 개의 값을 지정하면 첫 번째는 위 측면, 두 번째는 왼쪽과 오른쪽 측면, 세 번째는 아래 측면에 적용됩니다.

CSS 
/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
border-width: 0 50px 20px; /* 0: 위 측면, 50px: 왼쪽과 오른쪽 측면, 20px: 아래 측면 */
예제
HTML 
<p>border-width 세 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 0 50px 20px;
}
실제 적용된 모습

네 개 값

세 개의 값을 지정하면 시계 방향 순서대로 첫 번째는 위 측면, 두 번째는 오른쪽 측면, 세 번째는 아래 측면, 네 번째는 왼쪽 측면에 적용됩니다.

CSS 
/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */ /* 시계 방향으로 */
border-width: 0 10px 30px 50px; /* 0: 위 측면, 10px: 오른쪽 측면, 30px: 아래 측면, 50px: 왼쪽 측면 */
예제
HTML 
<p>border-width 네 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 0 10px 30px 50px;
}
실제 적용된 모습

브라우저 호환성

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

명세서

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

참고문헌

같이 보기