더 "Try it Yourself" 아래의 예.
정의 및 사용
테두리 스타일 속성은 요소의 네 테두리의 스타일을 설정합니다. 이 속성은 하나에서 네 개의 값을 가질 수 있습니다.
예를 들면 :
- border-style:dotted solid double dashed;
- 위의 경계는 점을 찍는다
- 오른쪽 테두리는 고체
- 아래쪽 테두리는 더블
- 왼쪽의 경계는 점선된다
- border-style:dotted solid double;
- 위의 경계는 점을 찍는다
- 좌우 테두리 고체
- 아래쪽 테두리는 더블
- border-style:dotted solid;
- 상단과 하단 테두리 점선입니다
- 좌우 테두리 고체
- border-style:dotted;
- 네 테두리 점선입니다
| 기본값: | none |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS1 |
| 자바 스크립트 구문 : | object .style.borderStyle="dotted double" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: 값 "hidden" IE7에서 지원 및 이전되지 않습니다. IE8은!의 DOCTYPE이 필요합니다. IE9 이상 지원 "hidden" .
CSS 구문
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| none | 기본값. 테두리를 지정합니다 | »플레이 |
| hidden | 같은 "none" 표 요소에 대한 국경 분쟁 해결을 제외하고, | »플레이 |
| dotted | 점선 테두리를 지정합니다 | »플레이 |
| dashed | 점선 테두리를 지정합니다 | »플레이 |
| solid | 고체 경계를 지정합니다 | »플레이 |
| double | 이중 테두리를 지정합니다 | »플레이 |
| groove | 3 차원 홈 테두리를 지정합니다. 효과는 테두리 컬러 값에 의존 | »플레이 |
| ridge | 3 차원 래치의 경계를 지정합니다. 효과는 테두리 컬러 값에 의존 | »플레이 |
| inset | 3 차원 삽입 테두리를 지정합니다. 효과는 테두리 컬러 값에 의존 | »플레이 |
| outset | 3 차원 처음 테두리를 지정합니다. 효과는 테두리 컬러 값에 의존 | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
요소의 각면에 서로 다른 테두리를 설정합니다 :
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 테두리
HTML DOM 참조 : borderStyle property