MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

当ページのリンクには広告が含まれています。
border線の種類別CSSデザイン

当記事ではHTMLとCSSで作るborder線21種類を解説しました。
サンプルは以下の通りです。

solid1本枠線

double2重枠線

dashed破線枠

dotted点線枠

groove谷型枠線

ridge山型枠線

inset凹型枠線

outset凸型枠線

solid下線

double下線

dashed下線

dotted下線

要素の左側の線

要素の右側の線
要素の上側の線
1本線同士の組み合わせ

ツートン下線

ツートン上線

ツートン左線

ツートン右線

グラデーション下線

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

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

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

目次

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

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

1本枠線|solid

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

solid(1本線)
<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上余白
“枠線の外側余白“はmarginを指定しましょう。
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;を指定することで、テキスト量に自動で合わせてくれます。
先ほどのpaddingmarginと合わせて調整すると良いでしょう。

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

テキストを中央へ
.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;
}

1本線|solid

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

solid|1本下線
<div class="sample9">ここに好きな文字を入れてください</div>

1本線について、左右と上線も解説しますが、HTMLは上記を参考にしてください。

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

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

テキストと下線に余白をあけた
.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;
  }

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

ツートン下線

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

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で指定します。
最後に左線の場合のみ、下のコードをafterbeforeに変えてください。

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に変更しましょう。

グラデーション下線

こちらは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:aftermargin-top:〇〇pxを追記してください。
値を上げると、その分だけ上に余白があきます。

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

グラデーション下線

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

border線を使ったSNSボタン

SNSボタンデザインCSSサンプル26

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

結論:border線は工夫しだいで汎用性が高い

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

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

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

border線の種類別CSSデザイン

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

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

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次