このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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-top: solid;border-top: dashed red;border-top: 1rem solid;border-top: thick double #32a1ce;border-top: 4mm ridge rgb(211 220 50 / 0.6);<section> <div> これは周囲に境界線があるボックスです。 </div></section>#example-element { background-color: #eeeeee; color: darkmagenta; 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 プロパティの一括指定です。
構文
css
border-top: 1px;border-top: 2px dotted;border-top: medium dashed green;/* グローバル値 */border-top: inherit;border-top: initial;border-top: revert;border-top: revert-layer;border-top: unset;一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。
値
<br-width>border-top-widthを参照してください。<br-style>border-top-styleを参照してください。<color>border-top-colorを参照してください。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素。::first-letter にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
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
html
<div>このボックスには上側に境界線があります。</div>CSS
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 |