Thanks to visit codestin.com
Credit goes to developer.mozilla.org

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

border-top-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

CSS border-top-width 속성은 요소의 위쪽 테두리 너비를 지정합니다.

시도해 보기

border-top-width: thick;
border-top-width: 2em;
border-top-width: 4px;
border-top-width: 2ex;
border-top-width: 0;
<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>
#example-element {
  background-color: palegreen;
  color: #000;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

구문

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

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

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

<line-width>

테두리의 너비입니다. 0 이상의 <length> 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

thin 얇은 테두리
medium 중간 테두리
thick 넓은 테두리

참고 : 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.

형식 정의

초기값medium
적용대상all elements. It also applies to ::first-letter.
상속no
계산 값the absolute length or 0 if border-top-style is none or hidden
Animation typea length

형식 구문

border-top-width = 
<line-width>

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

예제

HTML

html
<div>Element 1</div>
<div>Element 2</div>

CSS

css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}

결과

명세

Specification
CSS Backgrounds and Borders Module Level 3
# border-width

브라우저 호환성

같이 보기