【CSS】borderの書き方まとめ！線の種類・太さ・色の指定方法を初心者向けに解説

シュウ

公開日: 2020.02.24 / 更新日: 2026.10.30
今回は「CSS【border】で枠線を指定する方法」をテーマにしています。borderの基礎を学びましょう！

CSSを学び始めた方
HTMLとCSSの基本を学び、要素に枠線を付ける方法を知りたい方です。
borderの書き方が分からない方
線の種類・太さ・色をまとめて指定する書き方を理解したい方です。
borderの種類を知りたい方
solid・dashed・doubleなど、使える線の種類を一通り確認したい方です。

[記事の内容]

borderとは

CSSのborderは、要素の周りに枠線を付けるプロパティです。コンテンツの区切りや囲み、ボタンや見出しのデザインなど、現場で必ず使用します。

borderを使用する例

1コンテンツを区切る、または囲む際に使用する
2ボタンをデザインする際に使用する
3見出しをデザインする際に使用する　など

borderの基本的な書き方

borderは、線の種類、線の太さ、線のカラーを半角スペースで区切り、一括指定（ショートハンド）します。まずはHTMLを用意します。

<p class="border01">border</p>

次にCSSで枠線を指定します。

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: solid 5px #5e88a9; /*--border指定--*/
}

●①display / width / height: ボックスを幅240px・高さ60pxのブロック要素にしています。

●②line-height / text-align: 文字を縦横の中央に配置しています。

●③border: solid 5px #5e88a9;: 線の種類（solid）、太さ（5px）、色（#5e88a9）を一括で指定しています。

See the Pen bGdgGxa by shu (@shu0325) on CodePen.

※線の種類（solidなど）を省略すると、枠線は表示されません。必ず指定しましょう。

borderを上下左右に個別に指定する

borderは、上下左右の4辺をまとめて指定するショートハンドです。border-top、border-right、border-bottom、border-leftを使用すると、辺ごとに指定できます。

See the Pen jOPyORv by shu (@shu0325) on CodePen.

コードを見る

.b_main {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    color: #333333;
    text-align: center;
    background-color: #e2d0b6;
    margin: 30px auto;
}

.border01 {
    border-top: solid 5px #5e88a9; /*--上のみ--*/
}

.border02 {
    border-right: solid 5px #5e88a9; /*--右のみ--*/
}

.border03 {
    border-left: solid 5px #5e88a9; /*--左のみ--*/
}

.border04 {
    border-bottom: solid 5px #5e88a9; /*--下のみ--*/
}

.border05 {
    border-top: solid 5px #5e88a9;
    border-bottom: solid 5px #5e88a9; /*--上下--*/
}

.border06 {
    border-left: solid 5px #5e88a9;
    border-right: solid 5px #5e88a9; /*--左右--*/
}

.border07 {
    border-top: solid 5px #5e88a9;
    border-left: solid 5px #5e88a9;
    border-right: solid 5px #5e88a9; /*--3辺--*/
}

●①border-top / border-bottom: 上の辺・下の辺だけに枠線を付けます。

●②border-left / border-right: 左の辺・右の辺だけに枠線を付けます。

●③複数を組み合わせる: 上下、左右、3辺のように、必要な辺だけを組み合わせて指定できます。

borderの線の種類について

線の種類は複数あります。solid（実線）、double（二重線）、dotted（点線）、dashed（破線）などを順に紹介します。

solid スタイル

border: solidは、直線（1本線）のボーダースタイルです。

See the Pen QWbdYYK by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: solid 10px #5e88a9; /*--border指定--*/
}

●①border: solid 10px #5e88a9;: 線の種類をsolidにしています。太さは10pxです。

double スタイル

border: doubleは、2本の直線（二重線）のボーダースタイルです。

See the Pen MWwJROM by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: double 10px #5e88a9; /*--border指定--*/
}

●①border: double 10px #5e88a9;: 線の種類をdoubleにしています。太さは10pxです。

dotted スタイル

border: dottedは、点線のボーダースタイルです。

See the Pen oNXBOqZ by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: dotted 10px #5e88a9; /*--border指定--*/
}

●①border: dotted 10px #5e88a9;: 線の種類をdottedにしています。太さは10pxです。

dashed スタイル

border: dashedは、破線のボーダースタイルです。

See the Pen bGdgJmO by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: dashed 10px #5e88a9; /*--border指定--*/
}

●①border: dashed 10px #5e88a9;: 線の種類をdashedにしています。太さは10pxです。

groove スタイル

border: grooveは、彫り込んだような線のボーダースタイルです。

See the Pen wvagZOR by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: groove 10px #5e88a9; /*--border指定--*/
}

●①border: groove 10px #5e88a9;: 線の種類をgrooveにしています。太さは10pxです。

ridge スタイル

border: ridgeは、浮き出るような線のボーダースタイルです。

See the Pen JjdEqjJ by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: ridge 10px #5e88a9; /*--border指定--*/
}

●①border: ridge 10px #5e88a9;: 線の種類をridgeにしています。太さは10pxです。

inset スタイル

border: insetは、立体的に埋め込まれたような線のボーダースタイルです。

See the Pen QWbdRjL by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: inset 10px #5e88a9; /*--border指定--*/
}

●①border: inset 10px #5e88a9;: 線の種類をinsetにしています。太さは10pxです。

outset スタイル

border: outsetは、立体的に浮き出るような線のボーダースタイルです。

See the Pen VwLPOeX by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: outset 10px #5e88a9; /*--border指定--*/
}

●①border: outset 10px #5e88a9;: 線の種類をoutsetにしています。太さは10pxです。

borderの線の太さについて

線の太さはpxやemで指定するほか、thin（細い線）、medium（普通の線）、thick（太い線）のキーワードでも指定できます。

thin スタイル

border: solid thinは、細い線のボーダースタイルです。

See the Pen NWqdVOG by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: solid thin #5e88a9; /*--border指定--*/
}

●①border: solid thin #5e88a9;: 太さをキーワード（thin）で指定しています。

medium スタイル

border: solid mediumは、普通（デフォルト）の線のボーダースタイルです。

See the Pen NWqdQeo by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: solid medium #5e88a9; /*--border指定--*/
}

●①border: solid medium #5e88a9;: 太さをキーワード（medium）で指定しています。

thick スタイル

border: solid thickは、太い線のボーダースタイルです。

See the Pen mdJRNoL by shu (@shu0325) on CodePen.

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 50px auto;
    border: solid thick #5e88a9; /*--border指定--*/
}

●①border: solid thick #5e88a9;: 太さをキーワード（thick）で指定しています。

borderの線のカラーについて

線のカラーは、16進数（#ffffff）やカラーネーム（red）などで指定できます。

color スタイル

border-topなどの個別指定を使うと、上下左右にそれぞれ別のカラーを指定できます。

See the Pen bGdqepe by shu (@shu0325) on CodePen.

コードを見る

.border01 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #e2d0b6;
    margin: 50px auto;
    border: solid 10px #ff0000; /*--16進数で指定--*/
}

.border02 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #e2d0b6;
    margin: 50px auto;
    border: solid 10px red; /*--カラーネームで指定--*/
}

.border03 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #e2d0b6;
    margin: 50px auto;
    border-top: solid 10px red;
    border-bottom: solid 10px blue;
}

.border04 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #e2d0b6;
    margin: 50px auto;
    border-left: solid 10px red;
    border-right: solid 10px blue;
}

.border05 {
    display: block;
    width: 240px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #e2d0b6;
    margin: 50px auto;
    border-top: solid 10px red;
    border-bottom: solid 10px blue;
    border-left: solid 10px green;
    border-right: solid 10px yellow;
}

●①.border01: 16進数（#ff0000）で色を指定しています。

●②.border02: カラーネーム（red）で色を指定しています。

●③.border03 / .border04: 上下、または左右で別々の色を指定しています。

●④.border05: 4辺それぞれに別の色を指定しています。

【CSS】border-radiusを指定し角丸に挑戦！初心者向け講座

Webサイト制作でよく使用されるCSSプロパティー「border-radius」のご紹介です。
ボックスや画像、ボタンを角丸にする方法の説明をしております。
また簡単なborder-radiusでのアニメーションも載せています。

まとめ

今回は、CSSのborderで枠線を指定する方法を紹介しました。
borderは、線の種類・太さ・カラーを半角スペースで区切って一括指定します。上下左右を個別に指定したり、solid・double・dashedなどの種類を使い分けたりすることで、さまざまな枠線をデザインできます。
現場で必ず使用するプロパティなので、しっかり覚えておきましょう。あわせて「border-radius」の記事も読んで、さらに理解を深めてください。

POINT

borderは、線の種類、線の太さ、線のカラーを半角スペースで区切り、一括指定（ショートハンド）します。
セレクタ { border: 線種太さカラー; }のフォーマットを覚えておきましょう。指定する順序は任意です。
線の種類（solidなど）を省略すると、枠線は表示されません。
上下左右はborder-top・border-right・border-bottom・border-leftで個別に指定できます。
線の種類はsolid・double・dotted・dashed・groove・ridge・inset・outsetを使い分けます。
線の太さはpxのほか、thin・medium・thickでも指定できます。
線のカラーは16進数やカラーネームで指定でき、辺ごとに別の色も指定できます。