border-left-style
CSS 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
참고: 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.
구문
/* 키워드 값 */
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;
/* 전역 값 */
border-left-style: inherit;
border-left-style: initial;
border-left-style: unset;
border-left-style
속성은 border-style
속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.
형식 구문
<line-style>where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
예제
HTML
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
CSS
/* Define look of the table */
table {
border-width: 2px;
background-color: #52E385;
}
tr, td {
padding: 3px;
}
/* border-left-style example classes */
.b1 {border-left-style: none;}
.b2 {border-left-style: hidden;}
.b3 {border-left-style: dotted;}
.b4 {border-left-style: dashed;}
.b5 {border-left-style: solid;}
.b6 {border-left-style: double;}
.b7 {border-left-style: groove;}
.b8 {border-left-style: ridge;}
.b9 {border-left-style: inset;}
.b10 {border-left-style: outset;}
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-left-style' in that specification. |
Candidate Recommendation | No significant change. |
CSS Level 2 (Revision 1) The definition of 'border-left-style' in that specification. |
Recommendation | Initial definition. |
초기값 | none |
---|---|
적용대상 | all elements. It also applies to ::first-letter . |
상속 | no |
Computed value | as specified |
Animation type | discrete |
브라우저 호환성
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
같이 보기
- 테두리 스타일 관련 CSS 속성:
border-top-style
,border-right-style
,border-bottom-style
,border-style
. - 왼쪽 테두리 관련 CSS 속성:
border-left
,border-left-color
,border-left-width
.