Properties

Properties

Editing
  • account_tree
  • bug_report

border-style

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

사용 가능한 값 타입

〈line-style〉

사용되는 키워드

  • dashed

    데쉬선으로 설정한다.

  • dotted

    점선으로 설정한다.

  • double

    이중선으로 설정한다.

  • groove

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

  • hidden

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

  • inset

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

  • outset

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

  • ridge

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

  • solid

    실선으로 설정한다.

사용되는 전역 키워드

다음 전역 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

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

  • 〈line-style〉noneCSS1

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

구문

  • 〈line-style〉{1,4}

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

  • 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

    자바스크립트 형식

테스트 도구

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

지원 웹브라우저