CSS入門 | CSSボックスモデル | Border

Tags:

borderプロパティは、contentとpadding領域を囲むborderのスタイルを設定できるようにする。

CSS borderプロパティは次のとおりである。

プロパティ	説明
border	すべてのborderプロパティを使ったスタイルを1行で設定できる。
border-style	borderをさまざまな形に設定する。
border-width	borderの幅を設定する。
border-color	borderの色を設定する。
border-top	borderのtop部分のプロパティを一度に設定する。
border-top-style	borderのtop部分のスタイルを設定する。
border-top-width	borderのtop部分の幅を設定する。
border-top-color	borderのtop部分の色を設定する。
border-right	borderのright部分のプロパティを一度に設定する。
border-right-style	borderのright部分のスタイルを設定する。
border-right-width	borderのright部分の幅を設定する。
border-right-color	borderのright部分の色を設定する。
border-bottom	borderのbottom部分のプロパティを一度に設定する。
border-bottom-style	borderのbottom部分のスタイルを設定する。
border-bottom-width	borderのbottom部分の幅を設定する。
border-bottom-color	borderのbottom部分の色を設定する。
border-left	borderのleft部分のプロパティを一度に設定する。
border-left-style	borderのleft部分のスタイルを設定する。
border-left-width	borderのleft部分の幅を設定する。
border-left-color	borderのleft部分の色を設定する。

border-styleプロパティ

border-styleプロパティを使うと、borderをさまざまな形に設定できる。

dotted: borderを点線に設定する。
dashed: borderを少し長い破線に設定する。
solid: borderを実線に設定する。
double: borderを二重実線に設定する。
groove: borderを3次元の溝のような線に設定し、border-color値の影響を受ける。
ridge: borderを3次元の隆起した線に設定し、border-color値の影響を受ける。
inset: borderを3次元の内側に押し込まれた線に設定し、border-color値の影響を受ける。
outset: borderを3次元の外側に浮き出た線に設定し、border-color値の影響を受ける。
none: borderをなくす。
hidden: borderは存在するが表示されない。

<style>
    .dotted {border-style: dotted;}
    .dashed {border-style: dashed;}
    .solid {border-style: solid;}
    .double {border-style: double;}
    .groove {border-style: groove;}
    .ridge {border-style: ridge;}
    .inset {border-style: inset;}
    .outset {border-style: outset;}
    .none {border-style: none;}
    .hidden {border-style: hidden;}
    .mix {border-style: solid dashed dotted double;}
</style>

border-widthプロパティ

border-widthプロパティは、borderの太さを設定する。 px、em、cmなどのCSSサイズ単位を使って太さを直接設定できる。また、予約語であるthin、medium、thickを使って設定することもできる。

<style>
    .dottedA { border-style: dotted; border-width: 2px; }
    .dottedB { border-style: dotted; border-width: 5px; }
    .dashedA { border-style: dashed; border-width: thin; }
    .dashedB { border-style: dashed; border-width: thick; }
    .doubleA { border-style: double; border-width: 5px; }
    .doubleB { border-style: double; border-width: thick; }
    .mix { border-style: solid; border-width: 1px 2px 10px thick; }
</style>

border-colorプロパティ

border-colorプロパティは、borderの色を設定する。基本的なcolorプロパティ値だけでなく、透明な線を表すtransparent値も使用できる。 border-color値が設定されていない場合、該当要素のcolorプロパティ値をそのまま継承する。

<style>
    .red { border-color: red; }
    .green { border-color: rgb(0,255,0); }
    .blue { border-color: #0000FF; }
    .mix { border-color: red green blue maroon; }
    .color { color: teal; }
</style>

borderの個別設定

CSSを使うと、borderの上、右、下、左の部分に対して個別にスタイルを適用できる。

<style>
    .mixA {
        border-top-style: dotted;
        border-right-style: double;
        border-bottom-style: dotted;
        border-left-style: double;
    }
    .mixB { border-style: dotted double; }
</style>

4つのborder-style値を持つ場合は、top、right、bottom、leftの順に設定する。例: border-style: dotted dashed solid double;

これは次の4行のコードと同じ意味を持つ。

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: double;

3つのborder-style値を持つ場合は、top、rightとleft、bottomの順に設定する。例: border-style: dotted dashed solid;

これは次の4行のコードと同じ意味を持つ。

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: dashed;

2つのborder-style値を持つ場合は、topとbottom、rightとleftの順に設定する。例: border-style: dotted dashed;

これは次の4行のコードと同じ意味を持つ。

border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: dotted;
border-style-left: dashed;

1つのborder-style値を持つ場合は、すべてのborderスタイルを同じ値に設定する。例: border-style: dotted;

これは次の4行のコードと同じ意味を持つ。

border-style-top: dotted;
border-style-right: dotted;
border-style-bottom: dotted;
border-style-left: dotted;

borderの省略表記

すべてのborderプロパティを使ったスタイルを1行で設定できる。

<style>
    .good { border: 3px solid teal; }
    .wrong { border: 5px teal; }
</style>

borderプロパティを設定するには、必ずborder-styleプロパティが先に設定されている必要がある。

CSS3 border

CSS3では、borderの角を丸くしたり、borderに画像を使用したりできる。

CSS3で新しく追加されたborderプロパティは次のとおりである。

プロパティ	説明
border-radius	すべてのborder-radiusプロパティを使ったスタイルを1行で設定できる。
border-top-left-radius	borderのtop-left部分の角のスタイルを設定する。
border-top-right-radius	borderのtop-right部分の角のスタイルを設定する。
border-bottom-right-radius	borderのbottom-right部分の角のスタイルを設定する。
border-bottom-left-radius	borderのbottom-left部分の角のスタイルを設定する。
border-image	すべてのborder-imageプロパティを使ったスタイルを1行で設定できる。
border-image-source	borderとして使用する画像を設定する。
border-image-slice	borderとして使用する画像を切り取る方法を設定する。
border-image-width	borderとして使用する画像の幅を設定する。
border-image-outset	border領域の外側へborder画像がどれだけはみ出すかを設定する。
border-image-repeat	borderとして使用する画像の中間部分を繰り返すか伸ばすかを設定する。

CSS3 borderプロパティの対応バージョン

CSS3 borderプロパティをサポートする主なWebブラウザーのバージョンは次のとおりである。また、ブラウザーごとにベンダープレフィックスを使ってこの機能を最初にサポートしたバージョンも併記している。

プロパティ	ie	chrome	firefox	safari	opera
border-radius	9.0	5.0 4.0 -webkit-	4.0 / 3.0 -moz-	5.0 / 3.1 -webkit-	10.5
border-image	11.0	16.0 / 4.0 -webkit-	15.0 / 3.5 -moz-	6.0 / 3.1 -webkit-	15.0 / 11.0 -o-

border-radiusプロパティ

CSS3では、すべてのHTML要素にborder-radiusプロパティを設定して角を丸くできる。

<style>
    #p_01 { height: 150px; width: 200px; border-radius: 25px; }
    #div_01 { height: 150px; width: 200px; border-radius: 25px; }
    #p_02 {
        background: url(/examples/images/img_background_good.png);
        background-position: left top;
        background-repeat: repeat;
        border-radius: 25px;
    }
</style>

border-radiusプロパティは、実際には次の4つのプロパティのスタイルを1行で設定したものである。そのため、次のプロパティをそれぞれ使うと、角ごとに個別にスタイルを設定できる。

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

次の例は、角ごとに異なるサイズの丸い角を設定する例である。

<style>
    #p_01 {
        border-top-left-radius: 20px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 60px;
        border-bottom-left-radius: 80px;
    }
</style>

また、border-radiusプロパティを使っても、角ごとに異なるサイズの丸い角を設定できる。

<style>
    #p_01 { border-radius: 20px 40px 60px 80px; }
    #p_02 { border-radius: 20px 40px 60px; }
    #p_03 { border-radius: 20px 40px; }
    #p_04 { border-radius: 20px; }
</style>

4つのborder-radius値を持つ場合は、top-left、top-right、bottom-right、bottom-leftの順に設定される。 例: border-radius: 20px 40px 60px 80px; これは次の4行のコードと同じ意味を持つ。

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;

3つのborder-radius値を持つ場合は、top-left、top-rightとbottom-left、bottom-rightの順に設定される。 例: border-radius: 20px 40px 60px; これは次の4行のコードと同じ意味を持つ。

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 40px;

2つのborder-radius値を持つ場合は、top-leftとbottom-right、top-rightとbottom-leftの順に設定される。 例: border-radius: 20px 40px; これは次の4行のコードと同じ意味を持つ。

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 40px;

1つのborder-radius値を持つ場合は、すべてのborder-radius値が同じ値に設定される。 例: border-radius: 20px; これは次の4行のコードと同じ意味を持つ。

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

border-imageプロパティ

CSS3では、要素を囲むborderに画像を使用できる。

border-imageプロパティは次の順序で動作する。

borderとして使用する画像を決める。
画像のどの部分を切り取るかを決める。
borderの中間部分の画像処理を繰り返すか、伸ばすかを決める。

まず、borderとして使用する画像を決める。

devkuma Border

border-imageプロパティは、設定された画像を碁盤のように9つの部分に分ける。

その後、top、right、bottom、leftに該当する領域の処理を繰り返すか、伸ばすかを決める。

次の例は、round値を使ってborderの中間部分を繰り返すように設定した例である。

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    }
</style>

border-imageプロパティを設定するには、必ずborderプロパティが先に設定されている必要がある。

次の例は、stretch値を使ってborderの中間部分を伸ばすように設定した例である。

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    }
</style>

上の例で分かるように、border-imageプロパティ値として渡される引数の基本単位は%である。

また、垂直borderと水平borderの処理方式を異なるように設定することもできる。

<style>
    #p_01 {
        border: solid 20px transparent;
        -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
        border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    }
</style>

border-imageプロパティは、実際には次の5つのプロパティのスタイルを1行で設定したものである。

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat