Properties

Properties

Editing
  • account_tree
  • bug_report

border-width

요소의 테두리의 두께를 설정한다.

사용 가능한 값 타입

<'border-width'>

DEVDIC-Specified Data Types

border-width 속성에 사용되는 타입이다.

요소의 방향별 테두리의 두께를 일괄 지정할 수 있다.

설정 값의 갯수의 작용하는 방향

공백으로 구분된 값의 갯수작용 방향예시
value요소의 네 방향(상하좌우)
border-width: 1px;
margin: 10px;
padding: 5px;
value1 value2
  • value1: 요소의 위쪽과 아래쪽
  • value2: 요소의 왼쪽과 오른쪽
border-width: 1px 2px;
margin: 10px 5px;
padding: 5px 2px;
value1 value2 value3
  • value1: 요소의 위쪽
  • value2: 요소의 왼쪽과 오른쪽
  • value3: 요소의 아래쪽
border-width: 1px 2px 3px;
margin: 10px 5px 3px;
padding: 5px 10px 20px;
value1 value2 value3 value4
  • value1: 요소의 위쪽
  • value2: 요소의 오른쪽
  • value3: 요소의 아래쪽
  • value4: 요소의 왼쪽
border-width: 1px 2px 3px 4px;
margin: 10px 5px 3px 2px;
padding: 5px 10px 20px 2px;

 

  • CSS Backgrounds and Borders Module Level 3
    <line-width>{1,4}

    최소 1개 값부터 최대 4개의 값을 공백으로 구분하여 작성할 수 있고 작성된 값의 갯수에 따라 적용되는 방향이 달라진다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <line-width>

    선의 두께를 나타낸다. <length> 또는 지정된 키워드를 사용한다.

    • <length [0,∞]| thin | medium | thick
    Details

    포함된 타입

    • <length>

      숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

      • CSS Basic User Interface Module Level 4
        <length>
      Details

      사용되는 단위

      아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

      • cm

        1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

      • in

        1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

      • mm

        1cm의 1/10 값을 나타낸다.

      • pc

        1in의 1/16 값을 나타낸다.

      • pt

        1in의 1/72 값을 나타낸다.

      • px

        스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

      • Q

        1cm의 1/40을 나타낸다.

      • deg

        보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

      • grad

        400grad(그라디안)은 완전한 원을 만든다.

      • rad

        2π(라디안)이 완전한 원을 만든다.

      • turn

        1turn(턴)이 완전한 원을 만든다.

      • cap

        대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

      • ch

        글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

      • em

        대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

      • ex

        대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

      • ic

        한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

      • lh

        요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

      • rem

        html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

      • rlh

        html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

      • Hz

        1초당 발생한 진동수를 나타낸다.

      • kHz

        1000Hz를 나타낸다.

      • fr

        그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

      • vb

        html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vh

        뷰포트 높이를 상대적으로 1% 높이를 갖는다.

      • vi

        html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vmax

        vw 또는 vh 중 큰 값을 나타낸다.

      • vmin

        vw 또는 vh 중 작은 값을 나타낸다.

      • vw

        뷰포트 너비를 상대적으로 1% 폭을 갖는다.

      • dpcm

        1cm당 점(dot)의 수를 나타낸다.

      • dpi

        1in당 점(dot)의 수를 나타낸다.

      • dppx

        1픽셀(pixel)당 점(dot)의 수를 나타낸다.

      • ms

        1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

      • s

        초를 나타낸다.

    사용되는 키워드

    • medium

      기본 값이며 중간 굵기의 테두리 두께를 지정한다.

    • thick

      두꺼운 테두리 두께를 지정한다.

    • thin

      가는 테두리 두께를 지정한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈line-width〉medium
    CSS1

    기본 값이며 중간 굵기의 테두리 두께를 지정한다.

구문

  • border-width: thin;
    CSS1

    하나의 값으로 네 변의 테두리의 두께를 지정된 키워드 또는 직접 값을 설정한다.

  • border-width: thin 5px;
    CSS1

    2개의 값을 공백으로 구분하여 지정시 첫 번째 값은 상하, 두 번째 값은 좌우 테두리의 두께를 지정한다. 따라서 상하단은 thin, 좌우는 5픽셀의 두께를 설정한다.

  • border-width: thin medium thick;
    CSS1

    3개의 값을 공백으로 구분하여 지정시 첫 번째 값은 상단, 두 번째 값은 좌우, 세 번째 값은 하단의 테두리의 두께를 지정한다. 따라서 상단은 thin, 좌우는 medium, 하단은 thick 두께를 설정한다.

  • border-width: 1px 2px 3px 4px;
    CSS1

    4개의 값을 공백으로 구분하여 설정하는 경우 차례대로 상단, 오른쪽, 하단, 왼쪽 순으로 테두리의 두께를 지정한다. 따라서 상단은 1픽셀, 오른쪽은 2픽셀, 하단은 3픽셀, 왼쪽은 4픽셀의 두께를 설정한다.

  • object.style.borderWidth="1px 3px";
    CSS1

테스트 도구

테두리 두께 설정

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저