罫線関係

border-top-style、border-bottom-style、border-left-style、border-right-style、border-style、border-top-width、border-bottom-width、border-left-width、border-right-width、border-width、border-top-color、border-bottom-color、border-left-color、border-right-color、border-color、border-top、border-bottom、border-left、border-right、border

枠線の線種を指定する

これらのプロパティは、枠線（ボーダー）の線種を指定します。個別であれば、border-top-style、border-bottom-style、border-left-style、border-right-styleの4つを使って各部分の種類を指定しますが、border-styleプロパティを利用すると上下左右の枠線の線種を一度にまとめて指定できます。

値の「none」と「hidden」はどちらとも枠線を表示せず、枠線の太さも「0」に設定します。ただし、テーブルのセルの枠線として重なり合った場合は「none（初期値）」は他の値を優先し、「hidden」は自分自身の値を優先します。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	p { text-align:center;
                padding:0.5em;
                border:solid 5px #ff3300;}
        	.type1 { border-style:double;}
            .type2 { border-style:dotted;}
            .type3 { border-style:groove;}
    	</style>
    

HTML

    	<p class="type1">枠線は二重線</p>
    	<p class="type2">枠線は点線</p>
        <p class="type3">枠線は浮き出し</p>
    

枠線の太さを指定する

これらのプロパティは、枠線の太さを指定します。個別であれば、border-top-width、border-bottom-width、border-left-width、border-right-widthの4つを使って各部分の太さを指定しますが、border-widthプロパティを利用すると上下左右の太さを一度にまとめて指定できます。

枠線の太さの値にキーワード（thin、mediumなど）を指定した場合は、ブラウザによって太さが異なります。

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	p { text-align:center;
                padding:0.5em;
                border:solid 5px #ff3300;}
        	.type1 { border-width:1px;}
            .type2 { border-width:thick;}
            .type3 { border-width:thin;}
    	</style>
    

HTML

    	<p class="type1">枠線は1px</p>
    	<p class="type2">枠線は太い</p>
        <p class="type3">枠線は細い</p>
    

枠線の色を指定する

これらのプロパティは、枠線の色を指定します。個別であれば、border-top-color、border-bottom-color、border-left-color、border-right-colorの4つを使って各部分の色を指定しますが、border-colorプロパティを利用すると上下左右の色を一度にまとめて指定できます。

※ なお、この値の初期値は「color：色指定」で設定されている値となります。

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { text-align:center;
                padding:0.5em;
                border:solid 5px #000;}
        	.type1 { border-top-color:yellow;}
            .type2 { border-left-color:#fff;}
            .type3 { border-color:green blue red pink;}
    	</style>
    

HTML

    	<p class="type1">枠線の上は黄色</p>
        <p class="type2">枠線の左は白色</p>
        <p class="type3">上は緑、右は青、下は赤、左はピンク</p>
    

枠線をまとめて指定する

これらのプロパティは、枠線に関連したプロパティの値をまとめて指定します。記述順序は任意で、必要な値を半角スペースで区切って指定します。指定しなかった値は、初期値が指定されます。
個別であれば、border-top、border-bottom、border-left、border-rightの4つを使って各部分の枠線の表示方法を指定しますが、borderプロパティを利用すると上下左右の枠線に同じ値をまとめて指定できます。

■ サンプルコードと結果

CSS

    	<style type="text/css">
            p { text-align:center;
                padding:0.5em;
                border:solid 1px #000;}
        	.type1 { border-top:2px double #ff00ff;}
            .type2 { border-left:solid 5px #cc3366;}
            .type3 { border:#33ee00 3px solid;}
    	</style>
    

HTML

    	<p class="type1">枠線の上だけ違う</p>
        <p class="type2">枠線の左だけ違う</p>
        <p class="type3">上下左右の枠線は同じ書式</p>