CSS border-top-width: 위 테두리 두께

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS border-top-width 속성은 요소의 위 테두리 두께를 설정합니다.

#target {
  background: lightblue;
  border: 1px dashed #0006;
  border-top-color: red;
  border-top-style: solid;
  height: 100px;
  width: 200px;
}

#target {
  border-top-width: 4px;
  /* border-top-width: 0.5em;   */
  /* border-top-width: thick; */
  /* border-top-width: 0; */
}

<div id="target"></div>

불러오는 중...

구문

selector {
  /* <length> 값 */
  border-top-width: 10em;
  border-top-width: 3vmax;
  border-top-width: 6px;

  /* 키워드 값 */
  border-top-width: thin;
  border-top-width: medium;
  border-top-width: thick;

  /* 전역 값 */
  border-top-width: inherit;
  border-top-width: initial;
  border-top-width: revert;
  border-top-width: revert-layer;
  border-top-width: unset;
}

border-top-width 속성에는 한 개의 키워드 또는 <length> 값을 사용합니다.

값

<line-width>

0 이상의 <length>, 또는 테두리의 두께를 나타내는 키워드 값 중 하나입니다. 키워드 값은 다음 중 하나여야 합니다.

thin
medium
thick

CSS 명세가 키워드에 대응하는 두께를 정의하진 않았으므로 구현체마다 정확한 값은 다를 수 있습니다. 그러나 항상 thin ≤ medium ≤ thick 순서로 두께가 증가하며, 단일 문서 내에서는 값이 일정합니다.

예제

키워드 두께 비교하기

.thin {
  border-top-width: thin;
}
.medium {
  border-top-width: medium;
}
.thick {
  border-top-width: thick;
}

.thin, .medium, .thick {
  border-top-color: red;
  border-top-style: solid;
  height: 30px;
  margin-bottom: 8px;
  text-align: center;
  width: 200px;
}

<div class="thin">thin</div>
<div class="medium">medium</div>
<div class="thick">thick</div>

불러오는 중...

명세

CSS Backgrounds and Borders Module Level 3

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`border-top-width`

같이 보기

다른 방향: border-right-width, border-bottom-width, border-left-width
네 방향 단축 속성: border-width