border-left

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

border-left CSS 단축 속성은 요소의 왼쪽 테두리를 설정합니다. border-left-width, border-left-style, border-left-color의 값을 지정합니다.

시도해보기

다른 단축 속성과 마찬가지로, border-left는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

css
border-left-style: dotted;
border-left: thick green;
css
border-left-style: dotted;
border-left: none thick green;

따라서 border-left보다 먼저 지정한 border-left-style의 값은 무시됩니다. border-left-style의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

구문

css
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed green;

border-left은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

형식 구문

border-left = 
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

예제

html
<div>왼쪽 테두리를 가진 요소입니다.</div>
css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

명세

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter.
상속no
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-left

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support