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 class="default-example" id="default-example"> <div class="transition-all" id="example-element"> これは周囲に境界線があるボックスです。 </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 |