Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
border-top-color

border-top-color

上部の境界線の色に関する項目を指定できます。

サンプルコード

style.css

/* カラーネームで指定 */
div.test { border-top-color: red;}

/* カラーコードで指定 */
div.test1 { border-top-color: #ff0;}

/* 透明（ボーダー領域はあるが見えない） */
div.test2 { border-top-color: transparent;}

/* rgb()関数で指定 */
div.test3 { border-top-color: rgb(0, 119, 204);}

/* rgba()で半透明 */
div.test4 { border-top-color: rgba(0, 0, 0, 0.3);}

/* border-top-style も合わせて指定しないと表示されない */
.top-accent {
	border-top-style: solid;
	border-top-width: 4px;
	border-top-color: #ff6600;
}

/* カラーを変えてアクセントカラー別カードを作る実践例 */
.card-red  { border-top: 4px solid red;}
.card-blue { border-top: 4px solid #0077cc;}

指定可能な値一覧

値	概要
transparent	境界線を透明色に指定します。
カラーコード、もしくはカラーネーム	境界線を指定した色へ変更します。『border-top-color』に関する項目が指定されていない場合は『color』プロパティに指定されている色が初期値となります。

ブラウザでの表示結果

※ 以下のサンプルの『border-style』プロパティは『solid』を指定しています。

<div style="border-top-color: red; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

上部の境界線の色に関する項目を指定できます。

『border-top-color』プロパティに何も指定していない場合は『color』プロパティに設定されている色が初期値となります。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ