border-top
border-top
CSS 단축 속성은 요소의 위쪽 테두리를 설정합니다. border-top-width
, border-top-style
, border-top-color
의 값을 지정합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
다른 단축 속성과 마찬가지로, border-top
는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.
border-top-style: dotted;
border-top: thick green;
border-top-style: dotted;
border-top: none thick green;
따라서 border-top
보다 먼저 지정한 border-top-style
의 값은 무시됩니다. border-top-style
의 기본값은 none
이므로, border-style
을 명시하지 않으면 테두리를 만들지 않습니다.
구문
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
border-top
은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.
값
<br-width>
border-top-width
.<br-style>
border-top-style
.<color>
border-top-color
.
형식 구문
<line-width> || <line-style> || <color>where
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
예제
<div>
위쪽 테두리를 가진 요소입니다.
</div>
div {
border-top: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
명세
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-top' in that specification. |
Candidate Recommendation | No direct changes, though the modification of values for the border-top-color do apply to it. |
CSS Level 2 (Revision 1) The definition of 'border-top' in that specification. |
Recommendation | No significant changes. |
CSS Level 1 The definition of 'border-top' in that specification. |
Recommendation | Initial definition |
초기값 | as each of the properties of the shorthand:
|
---|---|
적용대상 | all elements. It also applies to ::first-letter . |
상속 | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
브라우저 호환성
BCD tables only load in the browser