border-left-style

border-left-style CSS 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.

참고: 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문

/* 키워드 값 */
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
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-left-styleChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
IE Full support 5.5Opera Full support 9.2Safari Full support 1WebView Android Full support 2.3Chrome Android Full support 18Firefox Android Full support 14
Notes
Full support 14
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기