border線の種類別｜HTML&CSSサンプル21選

2024年9月16日

当ページのリンクには広告が含まれています。

当記事ではHTMLとCSSで作るborder線21種類を解説しました。

どれもコピペで使えます。
また各コードの使い所や調整方法も書きましたので、目次を活用して気になるところから読んでくださいませ。

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

CSSとHTMLのborderボーダー種類1｜枠線8パターン

solid1本枠線

double2重枠線

dashed破線枠

dotted点線枠

groove谷型枠線

ridge山型枠線

inset凹型枠線

outset凸型枠線

まずは8つの枠線について解説します。

1本枠線｜solid

最もオーソドックスな線です。
border-styleの基本となるため、必ず押さえておきましょう。

solid(１本線)

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

divタグはpタグやspanタグに変更してもOKです。
用途に応じて使い分けてください。

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

solid：線の種類
px：線の太さ
#〇〇：線のカラー
カスタムする際は、この3つが基本となりますので覚えておきましょう。

枠線の内側を広げる

↑↓”枠線の内側余白“はpaddingの値で決まります。

.sample1{
  border: solid 4px  #8ec6ff;
  padding:15px;
}

padding:10px;＝上下左右に余白
padding:10px 0;＝上下に余白
padding:0 10px;＝左右に余白

枠線の外側を広げる

“枠線の外側余白“はmarginを指定しましょう。

.sample1{
  border: solid 4px  #8ec6ff;
  margin:10px 0;
}

margin:10px;＝上下左右に余白
margin:10px 0;＝上下に余白
margin:0 10px;＝左右に余白

テキストに合わせる

テキスト量に合わせた枠線

.sample1{
  border: solid 4px  #8ec6ff;
  display: inline-block;
}

display: inline-block;を指定することで、テキスト量に自動で合わせてくれます。
先ほどのpaddingやmarginと合わせて調整すると良いでしょう。

テキストを真ん中にしたい

テキストを中央へ

.sample1{
  border: solid 4px  #8ec6ff;
  text-align: center;
 }

text-align: center;を指定します。

テキスト量に合わせた枠線を中央へ

ただし先ほどのdisplay: inline-block;要素を中央寄せするには、少し工夫が必要です。

<div class="center">
<div class="sample1">こちらが枠線の指定</div>
</div>

.center{
   text-align: center;
   }
.sample1{
   border: solid 4px  #8ec6ff;
   display: inline-block;
   }

center＝親要素に中央寄せを指定
sample1＝子要素に枠線の指定
と2つに分ける必要があります。

枠線の角を丸くしたい

枠線の角を丸めるには、 border-radiusを指定します。

.sample1{
  border: solid 3px #8ec6ff;
  border-radius:20px;
 }

これくらい覚えておけば、ある程度思い通りにカスタマイズできるはずです。
これ以降のborder線にも応用してください。

2重枠線｜double

2重枠線は、スタイリッシュな印象を与えます。
ただし、使いすぎるとクドイ印象になるため注意しましょう。

double｜2重枠線

コードを表示する

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

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

線の太さは4px〜にしないと、2重線であることがほとんどわかりません。

破線枠線｜dashed

破線枠は使いどころが難しいです。
デザインに自信がない人にはオススメしません。

dashed｜破線枠

コードを表示する

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

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

点線枠線｜dotted

破線と同じく使い所が難しいです。
女性向けサイトなどに相性が良さそうです。

double｜点線枠

コードを表示する

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

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

谷型枠線｜groove

線が内側に窪んだように見えます。
立体的に見せる線なので、線の太さを4px〜指定しないと分かりづらいです。

あと、濃いカラーはコントラストがなくなり、ただの太い線になってしまうため注意しましょう。

groove｜谷型枠線

コードを表示する

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

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

山側枠線｜ridge

線が外側に浮き上がって見えます。
使い方は「groove」と同じです。

ridge｜山型枠線

コードを表示する

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

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

凹型枠線｜inset

コントラストが分かるカラーを指定する必要があります。

inset｜凹枠線（左と上が濃くなる）

コードを表示する

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

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

凸型枠線｜outset

コントラストが分かるカラーを指定する必要があります。

outset｜凸型枠線（右と下が濃くなる）

コードを表示する

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

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

CSSとHTMLのborderボーダー種類2｜1本線8パターン

solid下線

double下線

dashed下線

dotted下線

要素の左側の線

要素の右側の線

要素の上側の線

1本線同士の組み合わせ

先ほどは枠線について解説しました。
続いて1本線について解説します。
1本線は上下左右どこにでも設置可能ですし、組み合わせて使うこともできます。

1本線｜solid

テキストの下に下線を引くコード
マーカー線とはまた違った印象になります。

テキストと下線に余白をあける

テキストと下線に余白をあけた

.sample9{
  border-bottom:solid 3px  #8ec6ff;
  padding-bottom:5px!important;
}

padding-bottomの値を大きくすれば、下線が下がります。

要素と下線の長さを合わせる

テキストと下線の長さが同じ

.sample9{
  border-bottom:solid 3px  #8ec6ff;
  display: inline-block;
}

枠線と同様にdisplay: inline-block;を追加すると、要素の長さに自動で合わせてくれます。

要素の左側に線を引く

.sample9{
  border-left: solid 5px  #8ec6ff;
}

左側の線はborder-leftで指定できます。
ただし、要素を中央に持ってくるときはdisplay: inline-block;を指定しないと線だけ左に寄ったままになってしまうため、注意しましょう。

display:inline-blockなし

display:inline-blockあり

<div class="center">
<div class="sample9">こちらが枠線の指定</div>
</div>

.center{
   text-align: center;
   }
.sample9{
  border-left: solid 5px  #8ec6ff;
  display: inline-block;
  padding-left: 10px;
}

HTMLを親子要素に分けるのは、枠線と同じ原理です。
最後にpadding-leftを追記して、線の右側に余白を作ると見栄えがよくなります。
イメージ的にはright（右）であけているように見えますが、逆なのでご注意を。

要素の右側に線を引く

.sample9{
  border-right: solid 5px  #8ec6ff;
  display: inline-block;
  padding-right: 10px;
}

右側線の左側に余白をあけるにはborder-rightで指定しましょう。

要素の上に線を引く

要素の上側に線を引く

.sample9{
  border-top: solid 5px  #8ec6ff;
  font-weight:bold;
}

上側に線を引くには、border-topを指定します。

1本線を組み合わせる

要素の左と下に線を引いた

.sample9{
  border-left: solid 5px #8ec6ff;
  border-bottom: solid 5px #8ec6ff; 
  font-weight: bold;  
  padding-left: 10px;
}

border要素は組み合わせて使うことができます。
サンプルでは、左と下線を指定しました。
見出しデザインなどによく使われていますね。

2重線｜double

1本線より強調したいときにおすすめです。

double｜2重下線

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

.sample10{
   border-bottom: double 4px  #8ec6ff;
   text-align:center;
   font-weight:bold;
}

線の太さにより、見え方が結構変わるので、いろいろ試してみてください。

線の太さ4px

線の太さ6px

線の太さ8px

1本破線｜dashed

要素の区切りや箇条書きの下に設置すると、ちょっとしたメリハリをつけることができます。

箇条書き
サンプル

dashed｜1本破線

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

.sample11{
  border-bottom:dashed  3px  #8ec6ff;
  text-align:center;
  font-weight:bold;
}

こちらも線の太さを変えることで、見え方が異なります。

線の太さ1px

線の太さ3px

線の太さ5px

1本点線｜dotted

破線よりやや細かいため、やわらかい印象になります。
ただし線が細いと、両者の見分けはほとんどつきません。

dotted｜1本点線

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

.sample12{
  border-bottom:dotted 3px  #8ec6ff;
  text-align:center;
  font-weight:bold;
}

破線と使い分けるなら線の太さを2px〜にすると良いでしょう。

破線の太さ1px

点線の太さ1px

破線の太さ2px

点線の太さ2px

破線の太さ3px

点線の太さ3px

異なる1本線を組み合わせる

枠線では線の種類はひとつに固定でしたが、1本線同士なら異なる線同士を組み合わせることもできます。

左：1本線｜上：破線｜右：2重線｜下：点線｜

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

 .sample12 {
    border-left: solid 5px #8ec6ff;
    border-top: dashed 5px #8ec6ff;
    border-right: double 5px #8ec6ff;
    border-bottom: dotted 5px #8ec6ff;
    text-align: center;
    font-weight: bold;
    padding: 10px;
  }

それぞれ線を引く”場所“と”種類“を指定してください。

CSSとHTMLのborderボーダー種類3｜2色の線を組み合わせる

ツートン下線

ツートン上線

ツートン左線

ツートン右線

今度は異なる2色のborder線の組み合わせについて解説します。
見出しのデザインなどによく使われていますね。

ツートン下線

左右で違う色を指定することもできます。
ややコードが複雑になります。

2色の1本線

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

 .sample13 {
    border-bottom: solid 3px #8ec6ff;
    position: relative;
    font-weight: bold;
    text-align: center;
  }
  
  .sample13::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #ff8f9a;
    bottom: -3px;
    width: 50%;
  }

widthの値を変更すると、各色の長さを変更できます。
50％以上＝左側の色が伸びる
50％以下＝右側の色が伸びる

各色の長さを変更

width80％を指定

width20％を指定

線の太さを変更

width20％を指定

 .sample13 {
    border-bottom: solid 6px #8ec6ff;
    position: relative;
    font-weight: bold;
    text-align: center;
  }
  
  .sample13::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 6px #ff8f9a;
    bottom: -6px;
    width: 50%;
  }

線の太さをそれぞれ同じ値6pxに変更、下から2番目bottomの値-6pxも揃えてください。
※.bottomは-（マイナス）指定なので注意

線の種類を変更

2重線｜doubleを指定

 .sample13 {
    border-bottom: double 3px #8ec6ff;
    position: relative;
    font-weight: bold;
    text-align: center;
  }
  
  .sample13::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: double 3px #ff8f9a;
    bottom: -3px;
    width: 50%;
  }

破線｜dashedを指定

 .sample13 {
    border-bottom: dashed 3px #8ec6ff;
    position: relative;
    font-weight: bold;
    text-align: center;
  }
  
  .sample13::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: dashed 3px #ff8f9a;
    bottom: -3px;
    width: 50%;
  }

点線｜dottedを指定

.sample13 {
    border-bottom: dotted 3px #8ec6ff;
    position: relative;
    font-weight: bold;
    text-align: center;
  }
  
  .sample13::after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: dotted 3px #ff8f9a;
    bottom: -3px;
    width: 50%;
  }

線の位置を変更

上ツートン線

.sample13 {
   border-top: solid 3px #8ec6ff;
   position: relative;
   font-weight: bold;
   text-align: center;
 }
  
.sample56::after {
   position: absolute;
   content: " ";
   display: block;
   border-top: solid 3px #ff8f9a;
   top: -3px;
   width: 50%;
 }

線の位置を両方ともborder-topに指定、合わせて下から2番目もtopに変更しましょう。

border-left｜左ツートン線

 .sample13 {
    border-left: solid 4px #8ec6ff;
    position: relative;
    font-weight: bold;
    display: inline-block;
    padding-left: 10px;
  }
  
  .sample13::before {
    position: absolute;
    content: " ";
    display: block;
    border-left: solid 4px #ff8f9a;
    left: -4px;
    height: 50%;
  }

線の位置を両方ともborder-liftに指定、合わせて下から2番目もliftに変更しましょう。
また上下は各色の長さをwidthで調整しましたが、左右はheightで指定します。
最後に左線の場合のみ、下のコードをafter→beforeに変えてください。

border-right｜右ツートン線

<div class="center">
<div class="sample13">こちらが枠線の指定</div>
</div>

.center{
   text-align: center;
 }
.sample13 {
   border-right: solid 4px #8ec6ff;
   position: relative;
   font-weight: bold;
   padding-right: 10px;
   display: inline-block;
 }
  
 .sample13:after {
   position: absolute;
   content: " ";
   border-right: solid 4px #ff8f9a;
   right: -4px;
   height: 50%;
 }

右ツートンの場合は、1本線のときと同じく親子要素に分けると調整しやすいです。
線の位置を両方ともborder-rightに指定、合わせて下から2番目もrightに変更しましょう。

CSSとHTMLのborderボーダー種類4｜グラデーション下線

こちらはborderタグではないですが、おまけとしてグラデーション下線を引く方法も解説します。

グラデーション下線

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

.sample14 {
   font-weight: bold;
}

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

.sample14の方で、フォントの指定をしてください。
heightの値で線の太さを変更できます。
カラー調整はこちらのサイト180色のグラデーションサンプルがおすすめです。

テキストと線の余白調整

グラデーション下線

.sample14:afterにmargin-top:〇〇pxを追記してください。
値を上げると、その分だけ上に余白があきます。

テキスト量とグラデーション下線を合わせる

グラデーション下線

.sample14にdisplay: inline-block;を追記してください。

borderボーダー線を使ったSNSボタン

borderをうまく使えばこんな感じのボタンも作れます。

結論：CSSとHTMLのborderボーダー線は基本12種類を組み合わせて使おう

以上、borderタグについて解説しました。

見出しやボタンを作る際もborderの原理がわかっていれば、応用が効きますので、デザインの参考になれば幸いです。

borderと似ているマーカー線もあります。

border線の種類別｜HTML&CSSサンプル21選

CSSとHTMLのborderボーダー種類1｜枠線8パターン

1本枠線｜solid

枠線の内側を広げる

枠線の外側を広げる

テキストに合わせる

テキストを真ん中にしたい

枠線の角を丸くしたい

2重枠線｜double

破線枠線｜dashed

点線枠線｜dotted

谷型枠線｜groove

山側枠線｜ridge

凹型枠線｜inset

凸型枠線｜outset

CSSとHTMLのborderボーダー種類2｜1本線8パターン

1本線｜solid

テキストと下線に余白をあける

要素と下線の長さを合わせる

要素の左側に線を引く

要素の右側に線を引く

要素の上に線を引く

1本線を組み合わせる

2重線｜double

1本破線｜dashed

1本点線｜dotted

異なる1本線を組み合わせる

CSSとHTMLのborderボーダー種類3｜2色の線を組み合わせる

ツートン下線

各色の長さを変更

線の太さを変更

線の種類を変更

線の位置を変更

CSSとHTMLのborderボーダー種類4｜グラデーション下線

テキストと線の余白調整

テキスト量とグラデーション下線を合わせる

borderボーダー線を使ったSNSボタン

結論：CSSとHTMLのborderボーダー線は基本12種類を組み合わせて使おう

記事への質問等はこちらからどうぞ

コメントフォームコメントをキャンセル

border線の種類別｜HTML&CSSサンプル21選

CSSとHTMLのborderボーダー種類1｜枠線8パターン

1本枠線｜solid

枠線の内側を広げる

枠線の外側を広げる

テキストに合わせる

テキストを真ん中にしたい

枠線の角を丸くしたい

2重枠線｜double

破線枠線｜dashed

点線枠線｜dotted

谷型枠線｜groove

山側枠線｜ridge

凹型枠線｜inset

凸型枠線｜outset

CSSとHTMLのborderボーダー種類2｜1本線8パターン

1本線｜solid

テキストと下線に余白をあける

要素と下線の長さを合わせる

要素の左側に線を引く

要素の右側に線を引く

要素の上に線を引く

1本線を組み合わせる

2重線｜double

1本破線｜dashed

1本点線｜dotted

異なる1本線を組み合わせる

CSSとHTMLのborderボーダー種類3｜2色の線を組み合わせる

ツートン下線

各色の長さを変更

線の太さを変更

線の種類を変更

線の位置を変更

CSSとHTMLのborderボーダー種類4｜グラデーション下線

テキストと線の余白調整

テキスト量とグラデーション下線を合わせる

borderボーダー線を使ったSNSボタン

結論：CSSとHTMLのborderボーダー線は基本12種類を組み合わせて使おう

記事への質問等はこちらからどうぞ

コメントフォーム コメントをキャンセル

コメントフォームコメントをキャンセル