border線の種類別HTML&CSSデザイン１４選

この記事では「CSS」と「HTML」で作るborder線を使う際に役立つ基礎知識とコピペで使える「８種類の囲い線」と「５種類の下線」コードを載せています。

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

サンプル6

サンプル7

サンプル8

サンプル９

サンプル１０

サンプル１１

サンプル１２

サンプル１３

サンプル１４

記事の目次

border種類１【solid（１本線）の囲い線】
border種類２【double（２本線）の囲い線】
border種類３【dashed（破線）の囲い線】
border種類４【dotted（点線）の囲い線】
border種類５【groove（立体的に窪んだ線）の囲い線】
border種類６【ridge（立体的に山型になる線）の囲い線】
border種類７【inset（左側と上側が濃くなる線）の囲い線】
border種類８【outset（右側と下側が濃くなる線）の囲い線】
border種類９【solid（１本線）の下線】
border種類10【double（2本線）の下線】
border種類11【dashed（破線）の下線】
border種類12【dotted（点線）の下線】
border種類13【solid（2色下線）】
border種類14【グラデーション下線】
まとめ

border種類１【solid（１本線）の囲い線】

最もオーソドックスな線です。

どんなデザインでも邪魔をしません。

solid（１本線）

HTML
<p class="sample1">ここに好きな文字を入れてください</p>

style.css
.sample1{border: solid 4px #8ec6ff;}

ーborderー囲い線を使う際の事前知識

「HTML」コードの間に文字を入れないと線が出ないので注意しましょう。

<pの部分は<spanでも<divでもOK。その際は「終了タグ」も</span>または</div>に変更してください。

7pxを変更すれば「線の太さ」を変更できます。

#adffffを変更すれば「線のカラー」を変更できます。

枠線の「内側」の余白調整はpaddingを使用します。

↑「枠線の内側」に余白のある囲い線padding:10px;↓

枠線の「外側」の余白調整はmarginを使用します。

↑

「枠線の外側」に余白のある囲い線margin:24px 0;

↓

上記の「囲い線」だと線だけ広がっていて、ブサイクですよね。

そこで、線をテキストの量に合わせるにはdisplay:inline-block;を指定します。

テキスト量に合わせた線

上記囲い線の角は「直角」になっているので、角を丸めるにはborder-radiusを使います。

角を丸めた囲い線border-radius:20px;

上記のCSSコードをまとめるとこんな感じになります。

内側・外側の余白を開け、角を丸めて、テキスト量に合わせた線

style.css
.sample16{
border:solid 4px #8ec6ff;
padding10px;
margin:24px 0;
display:inline-block;
border-radius:20px;
}

注意

上記指定は<p>タグまたは<div>タグで「border」を使用する為のものです。

<span>タグで「border」を使用する場合は元々display:inline-block;が適用されているのでCSSで指定しなくてもテキストに合わせた囲い線になります。

<span class="sample15">ここに文字</span>

border種類２【double（２本線）の囲い線】

線と線の間に空白ができるので、スタイリッシュな印象になります。

ただし、使いすぎるとクドイ印象になるので注意しましょう。

double（２本線）

HTML
<p class="sample2">ここに好きな文字を入れてください</p>

style.css
.sample2{border: double 4px #8ec6ff;}

border種類３【dashed（破線）の囲い線】

囲い線の破線は使いどころが難しいデザインです。

デザインに自信がない人にはオススメしません。

dashed（破線）

HTML
<p class="sample3">ここに好きな文字を入れてください</p>

style.css
.sample3{border: dashed 4px #8ec6ff;}

border種類４【dotted（点線）の囲い線】

こちらも囲い線で使うには、かなりセンスが必要です。

女性向けサイトと相性が良さそうです。

dotted（点線）

HTML
<p class="sample4">ここに好きな文字を入れてください</p>

style.css
.sample4{border: dotted 4px #8ec6ff;}

border種類５【groove（立体的に窪んだ線）の囲い線】

線の内側が窪んだように見える線です。

立体的に見せる線なので、線を太く（4px以上）しないと分かりづらいです。

あと、濃いカラー（ブラックなど）を使うとコントラストがなくなり、ただの太い線になってしまいます。

groove（立体的に窪んだ線）

HTML
<p class="sample5">ここに好きな文字を入れてください</p>

style.css
.sample5{border:groove 6px #8ec6ff;}

border種類６【ridge（立体的に山型になる線）の囲い線】

こちらは、線の外側が窪みます。

使い方は「groove」と同じです。

ridge（立体的に山型になる線）

HTML
<p class="sample6">ここに好きな文字を入れてください</p>

style.css
.sample6{border: ridge 6px #8ec6ff;}

border種類７【inset（左側と上側が濃くなる線）の囲い線】

「コントラストが分かるカラーを使用する必要」があります。

inset（左側と上側が濃くなる線）

HTML
<p class="sample7">ここに好きな文字を入れてください</p>

style.css
.sample7{border:inset 6px #8ec6ff;}

border種類８【outset（右側と下側が濃くなる線）の囲い線】

「コントラストが分かるカラーを使用する必要」があります。

outset（右側と下側が濃くなる線）

HTML
<p class="sample8">ここに好きな文字を入れてください</p>

style.css
.sample8{border:outset 6px #8ec6ff;}

border種類９【solid（１本線）の下線】

テキストの下に下線を引くコード

マーカー線とはまた違った印象になります。

2017.12.31CSSマーカー線（蛍光ペン風）の解説【４２色のサンプル付き】

solid（下線）

HTML
<p class="sample9">ここに好きな文字を入れてください</p>

style.css
.sample9{border-bottom:solid 3px  #8ec6ff;}

ーborderー1本線を使う際の事前知識

線を下に引く場合は、border-bottomを指定します。

同様にborder-leftとすれば左側に線

solid（左線）

border-rightとすれば右側に線

solid（右線）

border-topとすれば上側に線

solid（上線）

を引けます。

上記のように<p>タグや<div>タグなどで「線をテキスト量に合わせる」または「左右に近接させる」にはdisplay:inline-block;を指定します。

※</span>タグで引く場合はdisplay:inline-block;は不要です。

また、線とテキストの余白を調整したい場合はpaddingを使います。例えば、下線であればpadding-bottom:5px;のように指定すると

テキストの下に余白が開きます。

その他の余白も「線を引く位置（上下左右）に合わせる」ことで指定できます。

border種類10【double（2本線）の下線】

ただの下線よりスタイリッシュになりますね。

double（下線）

HTML
<p class="sample10">ここに好きな文字を入れてください</p>

style.css
.sample10{border-bottom:double 3px  #8ec6ff;}

border種類11【dashed（破線）の下線】

「カテゴリー」「目次」「箇条書き」などに使うと、ちょっとしたメリハリになります。

その場合は１pxくらいに細くするとキレイに見えます。

dashed （下線）

HTML
<p class="sample11">ここに好きな文字を入れてください</p>

style.css
.sample11{border-bottom:dashed  3px  #8ec6ff;}

border種類12【dotted（点線）の下線】

当サイトの「カテゴリー」や「目次」はこれを使用しています。

dotted（下線）

HTML
<p class="sample12">ここに好きな文字を入れてください</p>

style.css
.sample12{border-bottom:dotted 3px  #8ec6ff;}

border種類13【solid（2色下線）】

左右で違う色を使う場合の下線です。ややコードが複雑になりますが目立ちます。

solid（2色下線）

HTML
<p class="sample13">ここに好きな文字を入れてください</p>

style.css
.sample13{
border-bottom:dotted 3px  #8ec6ff;
position: relative;
}
.sample13:after {
position: absolute;
display: block;
content: " ";
border-bottom: solid 3px #ffc78f;
bottom: -3px;
width: 50%;
}

width: 50%;の値を上げると「左側の色」が「右に」伸びます。

width:80%にした（2色下線）

値を下げると「右側の色」が「左に」伸びます。

width:20%にした（2色下線）

border種類14【グラデーション下線】

border線ではないですが、グラデーションの下線を引くことも出来ます。

グラデーション下線

HTML
<p class="sample14">ここに好きな文字を入れてください</p>

style.css
.sample14:after {
content:"";
display:block;
height:3px;
background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}

補足

各自調整する場合は、赤字コードを追記して下さい

グラデーション下線とテキストの余白を狭くしたい

style.css
.sample15:after{
content:"";
display:block;
height:3px;
background-image:linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
position:relative;
bottom:5px;
}

テキスト量に合わせたグラデーション下線を引きたい

style.css
.sample16{
display:inline-block;
}
.sample16:after{
content:"";
display:block;
height:3px;
background-image:linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}

グラデーションカラーを選ぶ時にオススメのサイト「コピペで使える!!180色のグラデーションサンプル」

重めのサイトですが、デザインが美しく、見てるだけで楽しめるサイトです。