cman.jp > WEBページ作成TOP > CSSリファレンス > 「罫線の上辺の設定」
WEBページ作成
広告
border-top 「罫線の上辺の設定」
border-top プロパティは罫線の上辺に関する設定をまとめて行うことができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | 全て | しない |
広告
border-top の値
| style [スタイルの指定] ( サンプル ) | |
|---|---|
| border-top: none; | 非表示（初期値、他と重なる罫線は他のスタイルを優先） |
| border-top: hidden; | 非表示（他と重なる罫線は他のスタイルより優先） |
| border-top: dotted; | 点線 |
| border-top: dashed; | 破線 |
| border-top: solid; | １本線 |
| border-top: double; | ２本線 |
| border-top: groove; | 立体線（窪み） |
| border-top: ridge; | 立体線（隆起） |
| border-top: inset; | 囲み立体線（窪み） |
| border-top: outset; | 囲み立体線（隆起） |
| width [太さの指定] ( サンプル ) | |
| border-top: thin; | 細い |
| border-top: medium; | 標準 |
| border-top: thick; | 太い |
| border-top: ～px; | 太さを数値で指定(ex. 1px、10px) |
| color [背景色の指定] ( サンプル ) | |
| border-top: #rrggbb; | 16進数RGB指定 [例] #00ffff、#660033 (色作成) |
| border-top: カラー名; | カラー名指定 [例] red、bule (一覧) |
| border-top: rgb(r, g, b); | 10進数RGB指定 [例] rgb(0,255,255) (色作成) |
| border-top: rgba(r, g, b, a); | 透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成) ※ CSS3の機能 |
| border-top: hsl(h, l%, s%); | HSL指定 [例] hsl(10,50%,90%) (色作成) |
| border-top: hsla(h, l%, s%, a); | 透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成) ※ CSS3の機能 |
| border-top: transparent; | 透明（無色） |
border-top のサンプル
1.罫線のスタイルの指定
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線のスタイル指定サンプル</title>
<style type="text/css">
<!--
p.s1 { border-top: dotted; } /* 点線 */
p.s2 { border-top: dashed; } /* 破線 */
p.s3 { border-top: solid; } /* １本線 */
p.s4 { border-top: double; } /* ２本線 */
p.s5 { border-top: groove; } /* 立体線（窪み） */
p.s6 { border-top: ridge; } /* 立体線（隆起） */
p.s7 { border-top: inset; } /* 囲み立体線（窪み） */
p.s8 { border-top: outset; } /* 囲み立体線（隆起） */
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線のスタイル指定サンプル</span>
<p class="s1">点線</p>
<p class="s2">破線</p>
<p class="s3">１本線</p>
<p class="s4">２本線</p>
<p class="s5">立体線（窪み）</p>
<p class="s6">立体線（隆起）</p>
<p class="s7">囲み立体線（窪み）</p>
<p class="s8">囲み立体線（隆起）</p>
</body>
</html>
2.罫線の太さ、色の指定サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線の太さ、色の指定サンプル</title>
<style type="text/css">
<!--
p.s1 { border-top: thin #ff0000 solid; } /* 細い線、赤 */
p.s2 { border-top: medium red solid; } /* 標準線、赤 */
p.s3 { border-top: thick #800080 solid; } /* 太い線、紫 */
p.s4 { border-top: 1px rgb(128,0,128) solid; } /* 1px 、紫 */
p.s5 { border-top: 5px #000000 solid; } /* 5px 、黒 */
p.s6 { border-top: 10px rgba(0,255,0,0.5) solid; } /* 10px 、緑半透明 */
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線の太さ、色の指定サンプル</span>
<p class="s1">細い線(thin)、赤</p>
<p class="s2">標準線(medium)、赤</p>
<p class="s3">太い線(thick)、紫</p>
<p class="s4">1px の線、紫</p>
<p class="s5">5px の線、黒</p>
<p class="s6">10pxの線、緑半透明</p>
</body>
</html>3.罫線のスタイル、太さ、色の組合せ指定サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線のスタイル、色、太さ組合せ指定サンプル</title>
<style type="text/css">
<!--
td.s1 { border-top: medium #00ff00 groove; }
td.s2 { border-top: medium #ff0000 ridge; }
td.s3 { border-top: thick #0000ff ridge; }
td.s4 { border-top: thick #00ffff inset; }
td.s5 { border-top: medium #ff00ff outset; }
td.s6 { border-top: thick #ffff00 outset; }
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線のスタイル、色、太さの指定サンプル</span>
<br><br>
<table style="width:100%;">
<tr><td class="s1">標準線、緑 、立体線（窪み）</td></tr>
<tr><td class="s2">標準線、赤 、立体線（隆起）</td></tr>
<tr><td class="s3">太い線、青 、立体線（隆起）</td></tr>
<tr><td class="s4">太い線、水色 、囲み立体線（窪み）</td></tr>
<tr><td class="s5">標準線、ピンク、囲み立体線（隆起）</td></tr>
<tr><td class="s6">標準線、黄色 、囲み立体線（隆起）</td></tr>
<tr>
</body>
</html>| 関連するCSS(STYLE) | |
|---|---|
| border | 罫線の設定 |
| border-bottom | 罫線の底辺の設定 |
| border-bottom-color | 罫線の底辺の色設定 |
| border-bottom-left-radius | 左下の角丸 |
| border-bottom-right-radius | 右下の角丸 |
| border-bottom-style | 罫線の底辺のスタイル設定 |
| border-bottom-width | 罫線の底辺の太さ設定 |
| border-collapse | テーブルの罫線の表示方法 |
| border-color | 罫線の色設定 |
| border-left | 罫線の左辺の設定 |
| border-left-color | 罫線の左辺の色設定 |
| border-left-style | 罫線の左辺のスタイル設定 |
| border-left-width | 罫線の左辺の太さ設定 |
| border-radius | 角丸の設定 |
| border-right | 罫線の右辺の設定 |
| border-right-color | 罫線の右辺の色設定 |
| border-right-style | 罫線の右辺のスタイル設定 |
| border-right-width | 罫線の右辺の太さ設定 |
| border-spacing | テーブルの罫線の間隔 |
| border-style | 罫線のスタイル設定 |
| border-top-color | 罫線の上辺の色設定 |
| border-top-left-radius | 左上の角丸 |
| border-top-right-radius | 右上の角丸 |
| border-top-style | 罫線の上辺のスタイル設定 |
| border-top-width | 罫線の上辺の太さ設定 |
| border-width | 罫線の太さ設定 |
| border-image | 画像を使った罫線の表示 |
| border-image-outset | ボーダーイメージエリアを広げる |
| border-image-repeat | 画像ボーダーの繰り返し方法 |
| border-image-slice | 画像のボーダー使用範囲 |
| border-image-source | ボーダーの使用画像ファイル |
| border-image-width | 画像ボーダーの太さ |
広告