This page was translated from English by the community.Learn more and join the MDN Web Docs community.
border-top
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월.
border-topCSS단축 속성은 요소의 위쪽 테두리를 설정합니다.border-top-width,border-top-style,border-top-color의 값을 지정합니다.
시도해 보기
border-top: solid;border-top: dashed red;border-top: 1rem solid;border-top: thick double #32a1ce;border-top: 4mm ridge rgba(211, 220, 50, 0.6);<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px;}다른 단축 속성과 마찬가지로,border-top는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.
css
border-top-style: dotted;border-top: thick green;css
border-top-style: dotted;border-top: none thick green;따라서border-top보다 먼저 지정한border-top-style의 값은 무시됩니다.border-top-style의 기본값은none이므로,border-style을 명시하지 않으면 테두리를 만들지 않습니다.
구문
css
border-top: 1px;border-top: 2px dotted;border-top: medium dashed green;border-top은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.
값
형식 구문
border-top =
<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-top: 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 type | as each of the properties of the shorthand:
|