Properties

Properties

Editing
  • account_tree
  • bug_report

border-style

요소의 테두리의 모양을 설정한다.

사용 가능한 값 타입

<'border-style'>

DEVDIC-Specified Data Types

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

요소의 테두리 모양을 지정하는 값을 나타낸다.

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

공백으로 구분된 값의 갯수작용 방향예시
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-style>{1,4}

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

포함된 타입

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

  • <line-style>

    선의 모양에 대한 키워드를 나타낸다. solid, dotted, dashed 이외의 값은 선의 두께가 어느 정도 지정되어야 제대로 보여진다.

    • CSS Backgrounds and Borders Module Level 3
      none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
    Details

    사용되는 키워드

    • dashed

      데쉬선으로 설정한다.

    • dotted

      점선으로 설정한다.

    • double

      이중선으로 설정한다.

    • groove

      홈이 파인 입체 선으로 설정한다.

    • hidden

      테이블 요소가 아닌 경우에는 'none'과 동일하다.

    • inset

      안쪽으로 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.

    • none

      테두리가 없고 색상과 두께는 무시된다.

    • outset

      바깥쪽으로 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.

    • ridge

      융기된 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.

    • solid

      실선으로 설정한다.

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

  • 〈line-style〉none
    CSS1

    테두리가 없고 색상과 두께는 무시된다.

    기본 값이며 테두리를 지정하지 않는다.

구문

  • border-style: groove;
    CSS1

    하나의 값으로 네 변의 테두리의 모양이 모두 정의된다.

  • border-style: dotted solid;
    CSS1

    2개의 값이 공백으로 구분되어 설정되는 경우 첫 번째는 상하, 두 번째 값은 좌우 테두리의 모양을 설정한다. 즉 상단과 하단은 dotted, 왼쪽과 오른쪽은 solid 모양으로 설정된다.

  • border-style: solid double dotted;
    CSS1

    3개의 값이 공백으로 구분되어 설정되는 경우 첫 번째는 상단, 두 번째 값은 좌우, 세 번째 값은 하단 테두리의 모양을 설정한다. 즉 상단은 solid, 왼쪽과 오른쪽은 double, 하단은 dotted 모양으로 설정된다.

  • border-style: dotted solid double dashed;
    CSS1

    4개의 값이 공백으로 구분되어 설정되는 경우 상단부터 오른쪽 시계 방향으로 오른쪽, 하단, 왼쪽 순으로 테두리의 모양을 설정한다. 즉 상단은 dotted, 오른쪽은 solid, 하단은 double, 왼쪽은 dashed 모양으로 설정된다.

  • object.style.borderStyle="dotted double";
    CSS1

    자바스크립트 형식

테스트 도구

다양한 테두리의 모양을 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저