CSS Border

CSSのBorderは、要素の周囲に枠線を描くために使用されます。Borderのスタイル、太さ、色を指定することができ、個別に設定することも、まとめて設定することも可能です。

これは、黒い実線

これは、下だけ

これは、丸み

これは、左の枠だけ色を指定する

スタイル

スタイルは、border-styleプロパティを使用して指定します。いくつかの基本的なスタイルがあります。

• solid: 実線
• dashed: 破線
• dotted: 点線
• double: 二重線
• none: 枠線なし

border-style: solid;
border-style: dashed;
border-style: dotted;

太さ

太さは、border-widthプロパティで指定します。単位はピクセル(px)やemなどが使えます。

border-width: 2px;
border-width: 0.5em;

色

色は、border-colorプロパティで指定します。色は色名、16進数、RGBやRGBAで指定できます。

border-color: red;
border-color: #ff0000;
border-color: rgb(255, 0, 0);
border-color: rgba(255, 0, 0, 0.5);

ショートハンドプロパティ

borderプロパティを使用して、スタイル、太さ、色をまとめて指定することができます。書式は以下の通りです。

border: [border-width] [border-style] [border-color];
border: 2px solid red;

個別のBorder

Borderの各辺を個別に設定することもできます。top、right、bottom、leftの各プロパティを使用します。

border-top: 2px solid red;
border-right: 4px dashed blue;
border-bottom: 2px dotted green;
border-left: 4px double purple;

複数のボーダーの色を設定するには、border-colorプロパティを使用します。色の値を1つから4つまで指定でき、上から右、下、左の順に適用されます。

1. border-color: 属性1; 上下左右のボーダーすべてが同じ色になります。
2. border-color: 属性1 属性2; 上下のボーダーは属性1の色、左右のボーダーは属性2の色になります。
3. border-color: 属性1 属性2 属性3; 上のボーダーは属性1の色、左右のボーダーは属性2の色、下のボーダーは属性3の色になります。
4. border-color: 属性1 属性2 属性3 属性4; 上のボーダーは属性1の色、右のボーダーは属性2の色、下のボーダーは属性3の色、左のボーダーは属性4の色になります。

サンプルコード

<style>
p.one
{
	border-style:solid;
	border-color:#0000ff;
}
p.two
{
	border-style:solid;
	border-color:#ff0000 #0000ff;
}
p.three
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
<p class="one">属性1</p>
<p class="two">属性1 属性2</p>
<p class="three">属性1 属性2 属性3</p>
<p class="four">属性1 属性2 属性3 属性4</p>

表示例

属性1

属性1 属性2

属性1 属性2 属性3

属性1 属性2 属性3 属性4

複数のBorderの幅やスタイルも、同じルールが適用されます。