border-top

CSSborder-top プロパティは、 border-top-width, border-top-style, border-top-color の値を設定する一括指定です。これは要素の上側の境界を設定します。

他の一括指定プロパティと同様に、 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;

一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。

<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;
}

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-top の定義
勧告候補 直接的な変更はないが、 border-top-color に適用される値が変更された。
CSS Level 2 (Revision 1)
border-top の定義
勧告 有意な変更点なし。
CSS Level 1
border-top の定義
勧告 初回定義
初期値一括指定の各プロパティとして
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-topChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応