【初心者向け】CSSのborderの使い方｜枠線を指定してデザインの幅を広げよう

CSSのborder（ボーダー）プロパティとは

CSSでborderを指定してあげることでさまざまなことができます。

文章やボックスを囲むこと以外にも見出しやボタンのデザインなどに使用することができるので使用用途は幅広いです。そこで、どのような状況でborderを使うのか、詳しく解説します。

文章やボックスを囲む

まずは、基本的なborderの使い方です。

文章やボックスにCSSでborderを指定することで、枠線が表示され、背景とのメリハリをつけることができます。

また、borderを角丸にすることで柔らかい印象のボックスにすることも可能です。

見出しのデザイン

見出しにもborderを指定することで、デザイン性のある見出しを作ることができます。

見出しの上下や左にborderを入れたシンプルな見出しや、擬似要素でborderを使って、おしゃれな見出しデザインにすることも可能です。

ボタンを囲む

ボックスにborderが使えるので、ボタンの装飾にもborderを使用することができます。

点線や破線を使用すれば、一味違ったおしゃれなボタンにデザインすることも可能です。

三角形を作りたいとき

特殊なケースではありますが、borderで三角形を作ることもできます。

CSSで擬似要素を使って三角形を作り、背景色と組み合わせてうまく配置することで斜めのラインが入った背景をデザインすることができます。

このような使い方もあるのでborderの使い道は幅広いです。

borderの使い方

さて、ここからはborderの実際の使い方について解説していきます。

borderプロパティの値について形状（スタイル）や太さ・色など指定できる値がいろいろあるので、よく理解しながらそのときの状況に合わせて使用してください。

borderプロパティの値の指定方法

borerをCSSで指定するとき、シンプルな書き方としては次のようになります。

p{
border: 1px solid red;
}

これだけでpタグにborderを指定することができます。では、中身をひとつずつ解説していきましょう。

セレクタはpタグを指定しています。つまり、タグ名が「p」の要素全てに適用されます。

borderをプロパティとし、値は「borderの太さ」「borderの形状」「borderの色」を指定しています。これだけで「太さ1pxの赤色の実線の枠線」が完成です。

太さ・形状・色の順序は特に決まりがないので、最初に色や形状を指定しても問題ありません。

では、もっと細かくborderプロパティの値について解説していきます。

borderの形状について

borderの形状は、いろいろ指定することが可能です。実線にしたり、破線にしたりとそのときの状況によって形状を使い分けることが大切です。

では、borderの形状についてどのような形状があるか解説していきます。まずは、よく使う形状について一覧にまとめてみました。

＜よく使うborderの形状の種類一覧＞

「実線」を指定したい場合

実線を指定したい場合は、値の形状の部分を「solid」で指定します。そうするとborderは1本の実線で表示されます。

「solid」は表(table)のデザインでも使用されるので、使用頻度はほかの形状の値よりも多く、borderを使用するのに欠かせない値となっています。実線は次の記述で表示できます。

border: 1px solid red;

この記述で、指定したセレクタの上下左右に「1pxの赤色の実線」が表示されます。

「2本線」を指定したい場合

2本線を指定したい場合は、値の形状の部分を「double」で指定します。2本線は次の記述で表示できます。

border: 10px double red;

この記述で「10pxで赤色の2本線」が表示されます。

2本線の間隔は指定ができないので、どうしても2本線の間隔を指定したい場合は、borderをdoubleで指定せず、box-shadowや::before、::afterといった擬似要素での使用を推奨します。

「破線」を指定したい場合

borderで破線を使用したい場合は、値を「dashed」に指定します。破線は次の記述で表示できます。

border: 5px dashed red;

これで指定したセレクタの上下左右に「5pxで赤色の破線」が表示されます。

破線の間隔などはborderでは指定することができないので間隔を指定するなど自由に使いたいときはこちらも2本線のときと同様に::beforeまたは::afterの擬似要素を使用してデザインすることをおすすめします。

「点線」を指定したい場合

borderで点線を使用したい場合は、値を「dotted」に指定します。dottedを指定することで、点線が表示されます。点線は次の記述で表示できます。

border: 5px dotted red;

これで指定したセレクタの上下左右に「5pxで赤色の点線」が表示されます。

点線も破線と同様に、間隔を指定するなど細かい指定はできません。もし指定が必要であれば、::beforeまたは::afterの擬似要素を使用してデザインすることをおすすめします。

形状を指定しないと表示されない

いろいろなborderの形状の値を解説しましたが、borderプロパティの形状の値を指定しないとどうなるでしょうか？

borderの形状を指定しないと、デフォルトが「none」なので非表示となります。つまり、borderでいくら色や太さを指定しても、この形状を指定しない限り、表示されないということです。

もし、色や太さを指定していても表示されないときはborderの形状の値を見直してあげてください。

borderの太さについて

borderの太さは、基本的には「px」単位を用いて指定します。「px」以外にも「em」や「pt」などが使えますが「%」は指定できないので注意が必要です。

また、「thin（細い）」「medium（普通）」「thick（太い）」といった指定も可能ですが、仕様書には具体的な太さの明示がないため、太さの指定は「px」が最も使いやすいです。

borderの色について

borderの色の指定はほかの色の指定と同じで16進数カラーコードもしくはカラーネームで指定することができます。

＜16進数カラーコードとカラーネームについて＞

borderをそれぞれのプロパティで指定する方法

今までの解説では、borderプロパティでまとめて、太さ・形状・色の値を指定しましたが、部分的にborderを表示したい場合や、上下左右で異なる形状や太さ・色にしたい場合もあると思います。そのときは、borderプロパティではなくほかのプロパティを使用します。

状況に応じて使い分けていく必要があるので、どのようなプロパティがあるのか理解し、そのときの状況にあったプロパティを使用することが大切です。それでは、border関係のプロパティについてそれぞれ解説していきます。

borderを上下左右の一部のみ指定する方法

上下左右の一部のみにborderを指定する方法について解説します。

見出しのデザインなどをしていると「下だけにborderをつけたい」など部分的に線を表示したい場合があります。borderプロパティで指定した後に、border-styleで部分的にnoneにすることもできますが、状況によっては次の記述が良い場合もあります。これから解説するのは、部分的に線を表示させる方法についてです。

/* 線を上のみに表示 */

border-top: 1px solid red;

/* 線を右のみに表示 */

border-right: 1px solid red;

/* 線を下のみに表示 */

border-bottom: 1px solid red;

/* 線を左のみに表示 */

border-left: 1px solid red;

下だけにborderを表示したい場合など、この記述をするだけで簡単に表示することができます。基本的には先程解説した、borderプロパティと使い方は変わりません。どの記述が良いかは表示したいborderによって変わってくるかと思いますがこの記述頻度は多いので覚えておくべきプロパティとなります。

border-styleで形状を指定する

borderの形状のみを指定したい場合、「border-style」というプロパティがあります。指定できる値は先述した、borderの形状の値と同じです。上下左右で異なった形状にしたい場合は、スペースで区切って複数の値を指定します。

/* 上下左右に実線 */

border-style: solid;

/* 上下に実線、左右に点線 */

border-style: solid dotted;

/* 上に実線、左右に点線、下に破線 */

border-style: solid dotted dashed;

/* 上に実線、右に点線、下に破線、右は線なし */

border-style: solid dotted dashed none;

• 値を1つ指定した場合……上下左右がその形状になります。
• 値を2つ指定した場合……1つ目の値は「上下」、2つ目の値は「左右」の形状になります。
• 値を3つ指定した場合……1つ目の値は「上」、2つ目の値は「左右」、3つ目の値は「下」の形状になります。
• 値を4つ指定した場合……1つ目の値は「上」、2つ目の値は「右」、3つ目の値は「下」、4つ目の値は「左」の形状になります。

border-widthで形状を指定する

borderの太さのみを指定するには「border-width」のプロパティを指定します。border-style同様で上下左右で異なる太さに指定することも可能です。

/* 上下左右に1px */

border-width: 1px;

/* 上下に1px、左右に2px */

border-width: 1px 2px;

/* 上に1px、左右に2px、下に3px */

border-style: 1px 2px 3px;

/* 上に1px、右に2px、下に3px、右に4px */

border-style: 1px 2px 3px 4px;

• 値を1つ指定した場合……上下左右がその値の太さになります。
• 値を2つ指定した場合……1つ目の値は「上下」、2つ目の値は「左右」の太さになります。
• 値を3つ指定した場合……1つ目の値は「上」、2つ目の値は「左右」、3つ目の値は「下」の太さになります。
• 値を4つ指定した場合……1つ目の値は「上」、2つ目の値は「右」、3つ目の値は「下」、4つ目の値は「左」の太さになります。

border-colorで色を指定する

borderの色についても今まで解説した「形状」「太さ」と同じ指定方法です。borderの色は「border-color」プロパティを使用します。

/* 上下左右に赤色 */

border-color: red;

/* 上下に赤色、左右に黒色 */

border-color: red black;

/* 上に赤色、左右に黒色、下に白色 */

border-color: red black white;

/* 上に赤色、右に黒色、下に白色、右に青色 */

border-color: red black white　blue;

• 値を1つ指定した場合……上下左右がその値の色になります。
• 値を2つ指定した場合……1つ目の値は「上下」、2つ目の値は「左右」の色になります。
• 値を3つ指定した場合……1つ目の値は「上」、2つ目の値は「左右」、3つ目の値は「下」の色になります。
• 値を4つ指定した場合……1つ目の値は「上」、2つ目の値は「右」、3つ目の値は「下」、4つ目の値は「左」の色になります。

borderの指定方法の比較

borderプロパティでまとめて指定する方法とborder-color、border-style、border-widthそれぞれ指定する方法を解説しました。では、「1px・実線・赤色」のborderを表示するのにそれぞれの記述で比較してみます。

borderプロパティ

borderプロパティでまとめて指定すると次の記述となります。

border: 1px solid red;

これだけで「1px・実線・赤色」のborderを表示することができます。では、次にborder-color、border-style、border-widthをそれぞれ指定してコードを記述していきます。

border-color、border-style、border-widthで指定した場合

/* 色を赤色に指定 */

border-color: red;

/* 形状を実線に指定 */

border-style: solid;

/* 太さを1pxに指定 */

border-width: 1px;

border-color、border-style、border-widthそれぞれのプロパティを使用して「1px・実線・赤色」のborderを表示しました。borderプロパティと比較すると記述量が全然違いますよね。まとめて指定したほうが記述も少なく済むのですが、初心者でどの値が何を指定しているのか忘れる可能性を考慮すると、最初のうちはわかりやすくそれぞれのプロパティを指定するのもおすすめです。また、borderの上下左右で異なる値を使用したい場合は、それぞれのプロパティを使用してください。

borderの角を丸くする方法

Webデザインでborderの角を丸めたい場合もあると思います。borderの角を丸めるプロパティも存在します。「border-radius」というプロパティを使用することで、borderの角を簡単に丸めることができます。正確には、セレクタの境界の外側の角を丸めるので、borderを使用してなくとも角を丸くすることが可能です。border-radiusは次のような記述となります。

border-radius: 10px;

これだけで、角を10px丸めることができます。実際に角を丸めると次のような表示になります。

borderの角がこれで丸くなりました。

border-radiusは左上、右上、右下、左下の順で、それぞれの値の指定も可能です。また、幅と高さが同じコンテンツにborder-radiusを値「50%」で指定することで円を作ることも可能です。

borderを実際に使ってみた

ここまでborderについて解説してきました。基本的な使い方は既に解説していますので、わかりやすく実際にborderを使用した見出しで解説したいと思います。

上下にborderを入れた見出し

シンプルに上下にborderを使用してデザインしました。記述はborder-topとborder-bottomのみなので簡単にデザインできます。paddingがないと文字とborderの間隔が狭いのでpaddingも指定しています。

＜HTML＞

<h2 class=”h2_1″>見出し1</h2>

＜CSS＞

.h2_1 {
border-top: 3px solid #EE8884;
border-bottom: 3px solid #EE8884;
padding: 16px
}

左にborderを入れた見出し

左側に太いborderを表示した見出しデザインです。borderの太さを10pxと太めに指定し、paddingでborderの高さをつけました。

＜HTML＞

<h2 class=”h2_2″>見出し2</h2>

＜CSS＞

.h2_2 {
border-left: 10px solid #EE8884;
padding: 5px 30px;
}

下に点線を入れた見出し

下側に点線を表示して、ポップなデザインの見出しです。この記述もシンプルで、簡単に実装できます。

＜HTML＞

<h2 class=”h2_3″>見出し3</h2>

＜CSS＞

.h2_3 {
border-bottom: 5px dotted #EE8884;
padding: 16px
}

スクラッチ風の見出し

次にスクラッチ風な見出しを作ってみました。

borderは通常外側に来るのですが、内側にborderが表示されています。難しそうに感じますが仕組みとしてはシンプルで、破線のborderを作って、borderの外側をbox-shadowで、ぼかしを0px・距離を5pxに指定することで塗り足しています。

＜HTML＞

<h2 class=”h2_4″>見出し4</h2>

＜CSS＞

.h2_4 {
background: #EE8884;
box-shadow: 0px 0px 0px 5px #EE8884;
border: dashed 2px white;
padding: 16px;
}

擬似要素を使用した見出し

今までの見出しと違って少々複雑な見出しです。擬似要素を使用して、見出し文字の前にborderで作った正方形を2つ配置しています。

これは::beforeと::afterの擬似要素を用いてデザインしています。widthやheightの値の指定はもちろん、形状もborder-radiusで丸くできるので、擬似要素を使うとデザインの自由度が増します。

＜HTML＞

<h2 class=”h2_5″>見出し5</h2>

＜CSS＞

.h2_5 {
position: relative;
padding: 16px 0 16px 60px;
}
.h2_5::before,
.h2_5::after {
content: “”;
position: absolute;
border: 2px solid #EE8884;
}
.h2_5::before {
top: 0;
left: 0;
width: 30px;
height: 30px;
}
.h2_5::after {
top: 20px;
left: 20px;
width: 20px;
height: 20px;
}

まとめ

今回は初心者に向けたCSSのborderの使い方についてまとめてみました。

borderを使用することで、おしゃれな見出しやボックスを作ることが可能となります。Webデザインをするのに欠かせないプロパティとなっていますので、この記事を参考にいろいろなborderを作って、デザインの幅を広げていきましょう。