Properties

Properties

Draft
  • account_tree
  • bug_report

border-style

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

설정 가능한 속성 값

  • none기본값키워드CSS1

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

  • hidden키워드CSS1

    테이블의 테두리에 대한 충돌 문제를 제외하고는 none과 같다.

  • dotted키워드CSS1

    점선으로 설정한다.

  • dashed키워드CSS1

    데쉬선으로 설정한다.

  • solid키워드CSS1

    실선으로 설정한다.

  • double키워드CSS1

    이중선으로 설정한다.

  • groove키워드CSS1

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

  • ridge키워드CSS1

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

  • inset키워드CSS1

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

  • outset키워드CSS1

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

  • initial키워드CSS3

    CSS의 기본 값으로 설정한다.

구문

  • border-style none or hidden or dotted or dashed or solid or double or groove or ridge or inset or outset or initial;기본형식CSS1

    요소의 테두리 모양을 상수로 설정한다. 하나의 값으로 네 변의 테두리의 모양이 모두 정의된다.

  • border-style dotted solid double dashed;사용 예CSS1

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

  • border-style solid double dotted;사용 예CSS1

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

  • border-style dotted solid;사용 예CSS1

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

  • object.style.borderStyle="dotted double";자바스크립트 형식CSS1

    자바스크립트 형식

테스트 도구

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

지원 웹브라우저