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은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

값

<br-width>

border-left-width.

<br-style>

border-left-style.

<color>

border-left-color.

형식 구문

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:

브라우저 호환성

BCD tables only load in the browser