ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】borderプロパティで枠線（ボーダー）をデザインする方法を解説

【CSS】borderプロパティで枠線（ボーダー）をデザインする方法を解説

HTML/CSS

2022/01/19

2023/06/07

この記事ではCSSで枠線をつけるプロパティ「border」について、具体例も併せて解説していきます。

borderプロパティは、線の太さ、色、種類を指定することで簡単に枠線を作ることができますが、実はそれぞれ細かい指定もできます。

枠線を応用することにより、図形などオシャレなデザインを実装できるようになるので是非最後までご覧ください。

なお枠線を丸めるプロパティ「border-radius」については下記で解説しています。

CSSのborder-radiusを極める！円・角丸自在に実装

この記事で身につく内容

borderプロパティの書き方（枠線の付け方）
border-colorの書き方
border-styleの書き方
border-widthの書き方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSで枠線をつけるプロパティ border
borderプロパティは一括指定
borderで見出しをデザインする
まとめ

CSSで枠線をつけるプロパティ border

borderの基本的な書式は以下になります。

基本書式

セレクタ {
　border: 線の太さ, 線の種類, 線の色 ;
}

具体的には以下のように指定します。

<div>
  線を引きます。
</div>

div {
  padding: 10px;
  border: 1px solid #000;
}

出力結果

線を引きます。

要素に枠線が出力されました。

このようにborderは線の太さ、線の種類、線の色を指定することができます。なお、線の太さ、線の種類、線の色の指定の順番は順不同でも適用されます。

borderプロパティは要素のpaddingとmarginの境界線を表示することができます。

borderと要素、余白の構造は下の図のようなイメージです。

borderプロパティは一括指定

一般的にborderプロパティでは、下記3つのプロパティを一括で記述します。

border-color：線の色
border-style：線の種類
border-width：線の幅

このように複数のプロパティをまとめて記述する記述を”ショートハンド”といいます。
ショートハンドで記述することができるborderのようなプロパティは”ショートハンドプロパティ”と呼ばれます。

それぞれのプロパティについて一つずつ解説していきます！

border-color：枠線の色を指定する

border-colorは枠線の色を制御するプロパティです。

border-colorに色を指定すれば上下左右の線全てに色が付きます。特定の方向の線だけに色を指定する場合は下記のようなプロパティを使用します。

border-top-color
border-right-color
border-bottom-color
border-left-color

上記のプロパティを使用すれば、上下左右4本の線全ての色を個別に違う色に指定することができます。

<div>
  上下左右の線の色を変えます。
</div>

div {
  padding: 10px;
  border: 4px solid;
  border-top-color: black;
  border-right-color: red;
  border-bottom-color: blue;
  border-left-color: green;
}

出力結果

上下左右の線の色を変えます。

上下左右の色を変更することができました。

線の色を一括で指定する場合

なお、線の色を一括で指定する場合は下記のようになります。

div {
  padding: 10px;
  border: 4px solid;
  border-color: red blue green yellow;
}

出力結果

上下左右の線の色を変えます。

このように、ショートハンドで記述することができます。

また、以下のような指定方法も有効です。

border-color: red blue green; /** 上 左右 下 **/
border-color: red blue; /** 上下 左右 **/

border-style：枠線の種類を指定する

border-styleは枠線の種類を指定することができます。

border-styleもborder-colorと同様に下記のプロパティを使えば、上下左右の線の種類を個別で指定できます。

border-top-style
border-right-style
border-bottom-style
border-left-style

指定できる線の種類は以下になります。

値	説明
none	線無し（規定値）
solid	実線
dashed	粗い点
dotted	点線
double	2重線
groove	谷線
ridge	山線
inset	内線
outset	外線
inherit	継承

  <div class="dotted">
    点線を引きます。
  </div>
  <div class="solid">
    実線を引きます。
  </div>
  <div class="double">
    2本の線を引きます。
  </div>
  <div class="groove">
    へこんだように見える境界線
  </div>
  <div class="ridge">
    出っ張ったように見える境界線
  </div>
  <div class="inset">
    要素が埋め込まれて見える境界線
  </div>
  <div class="outset">
    要素が出っ張って見える境界線
  </div>

div {
  padding: 10px;
  border: 8px red;
  margin-bottom: 20px;
}

.solid {
  border-style: solid;
}

.dotted {
  border-style: dotted;
}

.double {
  border-style: double;
}

.groove {
  border-style: groove;
}

.ridge {
  border-style: ridge;
}

.inset {
  border-style: inset;
}

.outset {
  border-style: outset;
}

出力結果

点線を引きます。

実線を引きます。

2本の線を引きます。

へこんだように見える境界線

出っ張ったように見える境界線

要素が埋め込まれて見える境界線

要素が出っ張って見える境界線

線のスタイルを一括で指定する場合

なお、線のスタイルを一括で指定する場合は下記のようになります。

div {
  padding: 10px;
  border: 4px solid;
  border-style: solid dotted double groove;
}

出力結果

上下左右に線を引きます。

border-colorプロパティと同様に、以下のような指定方法も有効です。

border-style: solid dotted double; /** 上 左右 下 **/
border-style: solid dotted; /** 上下 左右 **/

border-width：枠線の太さを指定する

border-widthは枠線の太さを指定することができます。

border-widthもborder-styleと同様に上下左右の線の太さを個別に指定することができます。

border-top-width
border-right-width
border-bottom-width
border-left-width

個別に指定できるほかに、値をthin（細い）、thick（太い）、medium（中程度の太さ）を適用することができます。

thin、thick、mediumで適用するとブラウザごとの太さが出力されます。

  <div class="thick">
    太い線を引きます。
  </div>
  <div class="thin">
    細い線を引きます。
  </div>
  <div class="medium">
    中程度の線を引きます。
  </div>
  <div class="line">
    上下左右の線の太さを個別に指定します。
  </div>

div {
  padding: 10px;
  margin-bottom: 10px;
  border-style: solid;
  border-color: red;
}

.thick {
  border-width: thick;
}

.thin {
  border-width: thin;
}

.medium {
  border-width: medium;
}

.line {
  border-top-width: thick;
  border-right-width: thin;
  border-bottom-width: medium;
  border-left-width: 20px;
}

出力結果

太い線を引きます。

細い線を引きます。

中程度の線を引きます。

上下左右の線の太さを個別に指定します。

これで線の太さを変更することができました。

線の太さを一括で指定する場合

なお、線の太さを一括で指定する場合は下記になります。

div {
  padding: 10px;
  border-style: solid;
  border-width: thick thin medium thick;
}

出力結果

線の太さを変えます。

border-colorプロパティと同様に、以下のような指定方法も有効です。

border-width: thick thin medium; /** 上 左右 下 **/
border-width: thick thin; /** 上下 左右 **/

線を非表示にする方法

transparentを使用すると、枠線を非表示にすることができます。

<div>
  線を一部消します。
</div>

div {
  padding: 10px;
  border: 4px solid;
  border-color: red transparent transparent blue;
}

出力結果

線を一部消します。

個別に指定することで一部だけ線を非表示にすることができます。

borderで見出しをデザインする

borderプロパティを使って見出しをデザインすることができます。例えば次のようなコードを見てみましょう。

<h2 class="left-border">左側に線がある見出しのデザイン</h2>

<h2 class="left-bottom-border">左側と下側に線がある見出しのデザイン</h2>

.left-border {
  border-left: 6px solid orange;
  padding-left: 8px;
}

.left-bottom-border {
  border-left: 6px solid orange;
  border-bottom: 3px solid orange;
  padding-left: 8px;
  display: inline-block;
}

出力結果