CSSのborderプロパティはどう使う？基礎知識や使い方を具体的に解説

本記事では、「CSS」のborderプロパティの使い方について解説します。「CSS」のborderプロパティに関する基礎知識や基本的な書き方、応用方法についてもあわせて解説するのでぜひ参考にしてください。

本記事では「CSS」のborderプロパティの使い方について解説します。具体的に解説する内容は、以下の通りです。

• 「CSS」のborderプロパティの基礎知識
• 「CSS」のborderプロパティの書き方
• 「CSS」のborderプロパティの応用

「CSS」のborderプロパティとは、「HTML」の要素に枠線を引くためのプロパティ群です。borderに関連するサブプロパティを指定することで、「HTML」要素の境界線の太さや色・線種などを決められます。

borderを使いこなせるようになれば、「CSS」を用いたWebデザインの表現力が向上するので、ぜひ参考にしてください。

CSSのborderプロパティとは？

「CSS」のborderプロパティは、「HTML」要素に枠線を引くことが可能です。このプロパティを利用することで、Webページをより洗練されたデザインに仕上げられます。

またborderプロパティでは、枠線の色・太さ・線のスタイル・角の丸みの設定などの指定が可能です。たとえば、ボタン要素にborderプロパティを指定することにより、はっきりとした境界線でボタンを囲めるため、見やすくなります。

このようにborderプロパティは、Webデザインにおいて「HTML」要素の強調や区切りをおこなうのに便利なプロパティです。

CSSのborderプロパティの基本的な書き方

「CSS」のborderプロパティでは、「border: 線のサイズ 線の種類 線の色;」という形式で記述します。

たとえば、div要素に2ピクセルの太さの赤い枠線を付ける場合のコード例は、以下の通りです。

div {
  border: 2px solid #f00;
}

ここで「2px」は線のサイズ、「solid」は線の種類（実線）、「#f00」は線の色を示しています。また、線の種類は9種類用意されており、それぞれ次のようになります。

線の種類	意味
solid	直線の枠線
hidden	枠線を非表示
dotted	点線
dashed	dottedよりも粗い目の点線
double	二重線
groove	立体的な浅い凹みのある枠線
ridge	立体的な浅い凸みのある枠線
inset	深く凹みのある枠線
outset	深く凸みのある枠線

「CSS」のborderプロパティを駆使することで、Webページの要素にさまざまな枠線を付けられます。

CSSのborderプロパティを指定する方法

ここからは、「CSS」のborderプロパティを指定する方法を紹介します。ここで紹介するプロパティは、以下の7つです。

1. 線の太さを指定
2. 線の色を指定
3. 線のスタイルを指定
4. 線のスタイルを個別に指定
5. 線を描く場所を指定
6. 角の丸みを指定する方法
7. 線を内側に指定する方法

それでは順番に見ていきましょう。

線の太さを指定

「CSS」のborderプロパティの一部として、線の太さを指定できます。線の太さを指定するには、単位付きの値を使用します。具体的なコード例は、以下の通りです。

div {
  border: 2px solid #000;
}

このコードでは、div要素に2ピクセルの太さの実線を付ける設定をしています。borderプロパティの最初の値「2px」が、線の太さを表しています。

線の色を指定

「CSS」のborderプロパティの一部として、カラーコードやカラーネームを使用して線の色を指定できます。具体的なコード例は、以下の通りです。

div {
  border: 2px solid #f00;
}

このコードは、div要素に2ピクセルの太さの赤い実線を付ける設定をしています。borderプロパティの最後の値「#f00」がカラーコードであり、赤色を示すものです。

線のスタイルを指定

「CSS」のborderプロパティの一部として、線のスタイルを指定できます。線のスタイルは9種類用意されており、それぞれスタイルの指定が可能です。具体的なコード例は、以下の通りです。

div {
  border: 2px dashed #000;
}

このコードでは、div要素に2ピクセルの破線の線を付ける設定をしています。borderプロパティのスタイルの値「dashed」が、破線を表すものです。

線のスタイルを個別に指定

「CSS」のborderプロパティには、四方向（上、右、下、左）の線のスタイルを別々に指定できるサブプロパティがあります。具体的なコード例は、以下の通りです。

div {
  border-top: 2px solid #000;
  border-right: 2px dotted #000;
  border-bottom: 2px dashed #000;
  border-left: 4px double #000;
}

このコードでは、div要素の四方向に対して異なるスタイルの線を指定しています。border-topプロパティで上線、border-rightプロパティで右線、border-bottomプロパティで下線、border-leftプロパティで左線のスタイルを個別に設定しています。

線を描く場所を指定

「CSS」のborderプロパティには、線を書く場所を四方向で指定するサブプロパティがあります。具体的なコード例は、以下の通りです。

div {
  border-top: 2px solid #000;
}

上記のコードでは、div要素に上方向に2ピクセルの太さの実線を付ける設定をしています。

角の丸みを指定する方法

「CSS」のborderプロパティには、角の丸みを指定するためのborder-radiusプロパティがあります。具体的なコード例は、以下の通りです。

/* 10pxの角の丸みを指定する例 */
div {
  border: 2px solid #000;
  border-radius: 10px;
}

このコードでは、div要素に2ピクセルの太さの実線の線と、10ピクセルの角の丸みを持つ四角形を作成する設定をしています。border-radiusプロパティが、角の丸みの指定です。

線を内側に指定する方法

CSSのbox-sizingプロパティには、border-boxという値があり、指定することで要素全体のサイズにborderを含められます。具体的なコード例は、以下の通りです。

/* 線の内側に2ピクセルの実線を描画する例 */
div {
  border: 2px solid #000;
  box-sizing: border-box;
}

このコードは、div要素に2ピクセルの太さの実線を設定しており、box-sizingプロパティにborder-boxが指定されています。そのため、borderの太さが要素のサイズに含まれるようになります。

CSSのborderプロパティを応用してみよう

ここからは、「CSS」のborderプロパティの応用法を紹介します。ここで紹介するプロパティの応用は、以下の4つです。

• 四つ葉のクローバーの形を作ろう
• 楕円の円弧を使った角丸を作ろう
• 歪んだ枠線を作ってみよう
• ボタンを作ろう

ここで解説する応用的なborderの使い方をマスターすれば、Webデザインでより多様な表現ができるようになります。それでは順番に見ていきましょう。

四つ葉のクローバーの形を作ろう

「CSS」のborder-radiusプロパティを使用して四つ葉のクローバーを作る応用例が、以下のコードです。具体的には4つの要素（画像または色付きのブロック）を並べ、それぞれの要素に対してborder-radiusを適切に指定し、クローバー型を作ります。

.img1 {
  border-radius: 50% 50% 0 50%
}
.img2 {
  border-radius: 50% 50% 50% 0
}
.img3 {
  border-radius: 50% 0 50% 50%
}
.img4 {
  border-radius: 0 50% 50% 50%
}

このコードでは、各要素に対してborder-radiusを指定しています。値は「左上」「右上」「右下」「左下」の順で、角を丸めるための値として利用されます。指定することで、中心に位置する角だけが直角のままで、他の角が丸くなり四つ葉のクローバーの模倣が可能です。

楕円の円弧を使った角丸を作ろう

「CSS」のborder-radiusプロパティを応用すると、楕円の円弧をベースにした角丸を作成できます。具体的には、border-radiusプロパティの値をスラッシュ（/）で区切り、前後の値セットで楕円横と縦の半径を指定することにより、楕円形の角丸を実装できます。

ソースコードは以下の通りです。

div {
  border-radius: 10px 20px 30px 40px / 5px 10px 50px 100px;
}

このコードでは、左上から時計回りに各角の楕円形の横と縦の半径を指定しています。具体的には、左上の角には10pxの横軸半径と5pxの縦軸半径が、右上の角には20pxの横軸半径と10pxの縦軸半径が、というように設定されています。このように指定することで、楕円の円弧をベースにした角丸のデザインを実装可能です。

歪んだ枠線を作ってみよう

「CSS」のborderプロパティの応用3つ目は、歪んだ枠線の作成です。具体的には、border-radiusで楕円の角の丸みを指定し、border プロパティを使って線種を指定します。

ソースコードは以下の通りです。

p {
  background: #efefef;
  border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
}
.box1 {
  border: 2px solid #333;
}

このコードでは、pセレクタにborder-radiusを使用して楕円の角の丸みを指定し、その上で、borderプロパティで線の種類を指定しています。

ボタンを作ろう

「CSS」のborderプロパティの応用4つ目は、ボタンの作成です。具体的には、「HTML」でボタン用の要素を作成後、「CSS」のborderプロパティで枠を作成します。その後、該当要素の文字色をcolorプロパティで指定した後にborder-radiusで角を丸くします。

「HTML」のソースコードは以下の通りです。

Click me

「CSS」のソースコードは以下の通りです。

.rounded-button {
  border: 2px solid #333;
  color: #333;
  border-radius: 10px;
}

このコードでは、「HTML」でボタン用の要素を作成し、その後「CSS」のborderプロパティで枠を作成し、colorプロパティでボタンの文字色を指定しています。最後に、border-radiusで角を丸くすると、丸みを帯びたボタンが作成できます。

CSSのborderプロパティを使ってさまざまなデザインを実装しよう

本記事では、「CSS」のborderプロパティの基本について解説しました。

borderを活用することで「HTML」要素の境界線の太さや色・線種などを自由に決められ、Webデザインの表現力を上げられます。

これからWebデザイナーとして成長したい方やWebデザインを始めようとしている方は、ぜひborderプロパティのさまざまな指定を試してみてください。