HTML - CSS - border 枠線の表示

 
1. border 枠線の表示
2. groove 例示
3. ridge 例示
4. outset 例示

1. border 枠線の表示

 ご注意!  以下に例示がありますが、Firefox で見た場合は、見た目が異なりますが、Vivaldi ではただの太線で見た目が全く同じになります。  border で枠線を表示します。  詳細は「border - CSS: カスケーディングスタイルシート | MDN」をご参照ください。  基本形は

	border: 幅 種類 色;
 主な種類は
意味
none 枠線を表示しない
hidden
solid 1本線で表示
double 2本線で表示
groove 立体的に窪んだ線で表示
ridge 立体的に隆起した線で表示
outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示し、ボーダーで囲まれた領域全体が立体的に隆起したように表示。
上下左右の一部だけに指定しても立体感は出ない。

2. groove 例示


pre.sample01
{
	margin-left: 2em;
	margin-right: 4em;
	padding: 1em;
	border:	groove 1mm #000000;
}

<pre class="sample01">
あいうえお
</pre>
 上記のように記述すると下記のように表示されます。
あいうえお

3. ridge 例示


pre.sample02
{
	margin-left: 2em;
	margin-right: 4em;
	padding: 1em;
	border:	ridge 1mm #000000;
}

<pre class="sample02">
あいうえお
</pre>
 上記のように記述すると下記のように表示されます。
あいうえお

4. outset 例示


pre.sample03
{
	margin-left: 2em;
	margin-right: 4em;
	padding: 1em;
	border:	groove 1mm #000000;
}

<pre class="sample03">
あいうえお
</pre>
 上記のように記述すると下記のように表示されます。
あいうえお