요소의 테두리의 모양을 설정한다.
border-style
속성에 사용되는 타입이다.
요소의 테두리 모양을 지정하는 값을 나타낸다.
공백으로 구분된 값의 갯수 | 작용 방향 | 예시 |
---|---|---|
value | 요소의 네 방향(상하좌우) |
|
value1 value2 |
|
|
value1 value2 value3 |
|
|
value1 value2 value3 value4 |
|
|
<line-style>{1,4}
최소 1개 값부터 최대 4개의 값을 공백으로 구분하여 작성할 수 있고 작성된 값의 갯수에 따라 적용되는 방향이 달라진다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
선의 모양에 대한 키워드를 나타낸다. solid
, dotted
, dashed
이외의 값은 선의 두께가 어느 정도 지정되어야 제대로 보여진다.
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
데쉬선으로 설정한다.
점선으로 설정한다.
이중선으로 설정한다.
홈이 파인 입체 선으로 설정한다.
테이블 요소가 아닌 경우에는 'none'과 동일하다.
안쪽으로 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.
테두리가 없고 색상과 두께는 무시된다.
바깥쪽으로 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.
융기된 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.
실선으로 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
테두리가 없고 색상과 두께는 무시된다.
기본 값이며 테두리를 지정하지 않는다.
border-style: groove;
하나의 값으로 네 변의 테두리의 모양이 모두 정의된다.
border-style: dotted solid;
2개의 값이 공백으로 구분되어 설정되는 경우 첫 번째는 상하, 두 번째 값은 좌우 테두리의 모양을 설정한다. 즉 상단과 하단은 dotted, 왼쪽과 오른쪽은 solid 모양으로 설정된다.
border-style: solid double dotted;
3개의 값이 공백으로 구분되어 설정되는 경우 첫 번째는 상단, 두 번째 값은 좌우, 세 번째 값은 하단 테두리의 모양을 설정한다. 즉 상단은 solid, 왼쪽과 오른쪽은 double, 하단은 dotted 모양으로 설정된다.
border-style: dotted solid double dashed;
4개의 값이 공백으로 구분되어 설정되는 경우 상단부터 오른쪽 시계 방향으로 오른쪽, 하단, 왼쪽 순으로 테두리의 모양을 설정한다. 즉 상단은 dotted, 오른쪽은 solid, 하단은 double, 왼쪽은 dashed 모양으로 설정된다.
object.style.borderStyle="dotted double";
자바스크립트 형식
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Backgrounds and Borders Module Level 3 | Last review date: 2022-7-9 |