border-top-style：要素の上辺に設定した境界線の形状を指定する

初期値 none
適用対象 全ての要素、::first-letter
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

border-top-styleプロパティの説明

CSSのborder-top-styleプロパティは、要素の上辺に設定した境界線（外枠、枠線）の形状を指定します。スタイルの種類は、あらかじめ用意されているキーワードから選択します。この値を明示しない限り、要素の境界線は初期値がnoneであるため、表示されない点に注意して下さい。

上下左右すべての境界線の形状を一括で指定する場合はborder-styleを、それ以外の値も含めて一括で指定する場合はショートハンド・プロパティのborderを使用して下さい。

ほかの辺に表示される境界線の形状を指定する場合は、以下のいずれかのプロパティを使用します。

border-top-styleに指定できる値

<line-style>
境界線の形状を指定するキーワード型の値です。使用できるキーワードには以下のものがあります。
none
境界線を表示しません。この値が指定されていると、border-widthの太さは0になります。テーブルのセルがcollaspedで表示される場合は、競合するセルの境界線が優先されます。これが初期値です。
hidden
境界線を隠します。この値が指定されていると、border-widthの太さは0になります。テーブルのセルがcollaspedで表示される場合は、競合するセルの境界線を打ち消して表示させません。
solid
境界線を実線で表示します。線を太くすると平面的な直線となります。
dashed
境界線を断続的に切れた線で表示します。線の太さによって点線や破線に見えます。線と線の間隔はブラウザの実装に依存します。
dotted
境界線を連続する丸い点で表示します。点の直径はborder-widthで指定した太さになり、点と点の間隔はブラウザの実装に依存します。
double
境界線を二重の直線で表示します。border-widthの値をできる限り三等分にし、直線と隙間を等間隔で並べます。つまり、二本の直線と隙間の合計値が線の幅とみなされます。
groove
境界線の中央が凹んでいるように見える直線を表示します。光源が右下に置かれており、左上に影が落ちます。この時、border-colorで指定した色は自動的に調整され、立体的に見えます。表現的にはridgeの逆です。
ridge
境界線の中央が隆起しているように見える直線を表示します。光源が左上に置かれており、右下に影が落ちます。この時、border-colorで指定した色は自動的に調整され、立体的に見えます。表現的にはgrooveの逆です。
inset
要素が押し込まれて見えるように明暗を分けた境界線を表示します。上下左右の境界線の色味はborder-colorで指定した値を基準に自動的に調整されます。表現的にはoutsetの逆です。
outset
要素が出っ張って見えるように明暗を分けた境界線を表示します。上下左右の境界線の色味はborder-colorで指定した値を基準に自動的に調整されます。表現的にはinsetの逆です。

border-top-styleの使い方とサンプルコード

border-top-styleプロパティの構文は以下の通りです。

/* キーワード値 */
border-top-style: none;
border-top-style: hidden;
border-top-style: solid;
border-top-style: dashed;
border-top-style: dotted;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/* グローバル値 */
border-top-style: inherit;
border-top-style: initial;
border-top-style: revert;
border-top-style: unset;

border-top-styleの実例

それでは簡単な例を見てみましょう。ここでは、要素の上辺だけに境界線を表示した場合の挙動を確かめます。groove、ridge、inset、outsetは立体的な表現であるため、全ての辺に適用しなければ効果が得られません。

<section class="samp_box">
	<p>border-top-style</p>
	<div id="border_1">solid</div>
	<div id="border_2">dashed</div>
	<div id="border_3">dotted</div>
	<div id="border_4">double</div>
	<div id="border_5">groove</div>
	<div id="border_6">ridge</div>
	<div id="border_7">inset</div>
	<div id="border_8">outset</div>
</section>
.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	background-color: #eee;
	border-top-width: 3px;
}
#border_1 {
	border-top-style: solid;
}
#border_2 {
	border-top-style: dashed;
}
#border_3 {
	border-top-style: dotted;
}
#border_4 {
	border-top-style: double;
}
#border_5 {
	border-top-style: groove;
}
#border_6 {
	border-top-style: ridge;
}
#border_7 {
	border-top-style: inset;
}
#border_8 {
	border-top-style: outset;
}

続いてnoneとhiddenの違いについて確認します。この二つは、どちらも境界線を表示させないという値ですが、要素同士が隣接するテーブルなどの場合に違いが現れます。具体的には、noneは競合するボーダーに影響を与えませんが、hiddenは競合するボーダーも一緒に隠します。

<table class="samp_table">
	<caption>全て表示</caption>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

<table class="samp_table" id="tb_1">
	<caption>border-top-style: none;</caption>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

<table class="samp_table" id="tb_2">
	<caption>border-top-style: hidden;</caption>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>
.samp_table {
	margin: 1rem auto 0 auto;
	width: 80%;
	border: none;
	border-collapse: collapse;
	text-align: center;
}
.samp_table td {
	padding: .5rem;
	border-top: 3px solid #fc605b;
	border-right: 3px solid #fcc15b;
	border-bottom: 3px solid #76fc5b;
	border-left: 3px solid #5b96fc;
}
#tb_1 td {
	border-top-style: none;
}
#tb_2 td {
	border-top-style: hidden;
}

border-top-styleに関連するCSSプロパティ

境界線・輪郭線
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
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-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの装飾を一括で指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインと要素の空間を指定する
outline-style アウトラインの形状を指定する
outline-width アウトラインの太さを指定する
© weblan3.com