border-top-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
border-top-width
は CSS のプロパティで、要素の上側の境界の幅を設定します。
試してみましょう
border-top-width: thick;
border-top-width: 2em;
border-top-width: 4px;
border-top-width: 2ex;
border-top-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: #000;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
構文
css
/* キーワード値 */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
/* <length> 値 */
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;
/* グローバルキーワード */
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: revert-layer;
border-top-width: unset;
値
<line-width>
-
境界の幅を、明示的な非負の
<length>
またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。thin
medium
thick
メモ:
仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick
というパターンに従い、値は同じ文書の中では一貫しています。
公式定義
初期値 | medium |
---|---|
適用対象 | すべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 絶対的な長さ、または border-top-style が none または hidden の場合は 0 |
アニメーションの種類 | length |
形式文法
border-top-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
例
HTML
html
<div>Element 1</div>
<div>Element 2</div>
CSS
css
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-top-width: thick;
}
div:nth-child(2) {
border-top-width: 2em;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-width |
ブラウザーの互換性
関連情報
- 他の border-width 関連 CSS プロパティ:
border-left-width
,border-right-width
,border-bottom-width
,border-width
- 他の border-top 関連 CSS プロパティ:
border
,border-top
,border-top-style
,border-top-color