今回はCSSのborderで表示させる線の長さを調整する方法を解説します。いくつかのパターン別に解説していくので、目的に合った方法を選んで頂ければと思います。

前提：CSSのborderの長さの決まり方

border自体に長さを指定することはできない

まずもってborder自体には長さを指定するような書き方はありません。
誤った指定例： border-length:60pxのような書き方はないのです。

borderとは要素の上下左右に表示されるもの

通常の四角いボックスでは、上下のborderは要素の横幅、左右のborderは縦の高さに沿って描かれます。線の外側までの大きさには内容領域だけでなくpaddingやborderの太さも含まれます。この記事の画像は公開当時の説明図です。

HTMLコード
<p>これは要素です</p>
ブラウザ表示A Pen by saruwakakun 1

例えば、 このような要素があるとします。グレイの部分が段落要素（pタグ）の占める範囲を表しています。

HTMLコード
<p>これは要素です</p>
CSSコード
p{
border-bottom: solid 2px #555;
}
ブラウザ表示Dafdfa

例えばborder-bottom（下線を引くためのプロパティ）を使うと、このように要素の下の部分全体に下線が引かれます。

その1：要素自体の大きさを変えることで線の長さを変える

例えば、divタグの上に線を引くとします。

BEFORE

幅を指定しないdivの横幅いっぱいに引かれた上線

<div class="test">
  <p>これは要素です</p>
</div>
.test {border-top: solid 4px gray}

borderの占める範囲

通常フローのブロック要素でwidthがautoのdivは、一般に親の利用できる横幅を使います。「これじゃあ長すぎる！」という場合もあるかと思います。1つの対策として「divタグの横幅を指定する」という手があります。

ちなみに

divなどはブラウザーの標準スタイルでblock表示になります（displayプロパティ自体の初期値はinlineです）。通常フローのblockでwidthがautoなら、一般に親の利用可能な幅を使います。flex/gridの子要素や絶対配置などでは決まり方が異なります。詳しくは下の記事をどうぞ。

あわせて読みたい【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

AFTER

Dfafa 1

.test {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
	width: 200px;
	border-top: solid 4px gray;
	}

divタグ（クラス名.test）に対して、width: 200pxを指定しました。この例ではpaddingや左右borderがないため、border-topの横幅も200pxです。掲載コードにはmax-width:100%も付け、親が200px未満なら縮むようにしています。widthの書き方についてはこちらの記事で解説しています。

あわせて読みたいCSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

要素の最大幅を指定する

ここで問題になるのが「はみ出てしまうこと」です。例えば、max-widthを付けずにwidth:600pxだけを指定したとします。これをもし幅350pxのスマホで見たら、はみ出てしまうのです。

そこでおすすめなのが、max-widthにより要素の最大幅を指定することです。widthは指定せずに、例えばmax-width:650pxを指定すれば、この通常フローのブロック要素では、 通常は親の利用可能な幅に収まる（長い内容のはみ出しは別途確認）
ただし、デカイ画面で見ても、要素は650px以上には広がらないということになります。初期のcontent-boxではpaddingやborderはwidth/max-widthの外側に加わるため、掲載コードではbox-sizing:border-boxでそれらを指定幅に含めます。

最大幅の指定例

1つ例を見てみましょう。ここではmax-width:500pxと指定してみました。

.test {
  box-sizing: border-box;
  overflow-wrap: anywhere;
	max-width: 500px;
	border-top: solid 4px gray;
	}

このときの表示は以下のようになります。

デカイ画面で見ても、max-width（500px）以上には広がらないFadfa 6

小さい画面で見ても、ピッタリおさまるDfafda 1

このように最大幅を活用することで、要素（線）が横に長くなりすぎるのを防ぐことができます。

その2：文字の長さに応じて、borderの長さを可変

「文字の上下左右にborderで線を引きたい」ということもあるかと思います。

inline-blockで内容に応じた幅にする

そんなときはdisplay:inline-blockという指定をするのがオススメです。widthをautoのままにすれば、通常は内容と利用可能な幅に応じて要素の幅が決まります。掲載コードではmax-width:100%とborder-box、長い語の折り返しも指定します。画像など幅が固定された中身は、別途はみ出さないか確認してください。

BEFORE

今回は見出しのh2タグに対して、上線をつけてみました。

<h2>これは要素です</h2>
h2 {
	border-top: solid 4px gray;
}

ブロック表示の見出しと同じように横幅いっぱいに広がる上線の例

AFTER

これを文字の上にだけ表示させるようにします。やることは線をつけるh2タグに対してdisplay: inline-blockを指定します。狭い親の中でも収まるように、最大幅と長い語の折り返しも補っています。

h2 {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
	display: inline-block;
	border-top: solid 4px gray;
}

A Pen by saruwakakun 5

これだけで、文字の上の部分にだけ線が付くようになります。

Dfafda 2

文字が長くなれば、利用可能な幅の範囲で要素と線も長くなります。折り返す場合、線は各行の文字長ではなくボックスの幅に沿います。「inline-blockを使うとなぜこうなるか」ということについてもこちらの記事で解説しています。

あわせて読みたい【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

全体を線で囲う場合

inline-blockを指定しつつ、上下左右にborderをつけた場合にはどうなるのでしょうか。

<h2>これは要素です</h2>
h2 {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
	display :inline-block;
	border: solid 4px gray;
}

A Pen by saruwakakun 6

このように要素全体がborderで囲われます。

余白指定

paddingの見方

文字と線の間の余白はpaddingで調整できます。こちらはpadding: 10px 20px 15px 20px;を指定した場合です。それぞれの値が指定する余白部分はこの図の①〜④の通りです。

paddingについてはこちらの記事で詳しく解説しています。

あわせて読みたいCSSのmarginとは？paddingとは？余白の指定方法まとめ

その3：要素の幅とborderの長さを変えるには

「要素の幅」と「線の長さ」を別々に指定したい、という場合ですが、残念ながらborderではできません。仕方がないので「疑似要素」を使うのが良いでしょう。

あわせて読みたいCSSの疑似要素とは？beforeとafterの使い方まとめ

好きな長さの下線をつける

疑似要素で下線を作る

このように要素よりも短い下線を引いてみましょう。

<h2>これは例文です</h2>
h2{
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}

/*以下で線を表示*/
h2::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 5px;/*線の太さ*/
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

h2::before{~}で線を表示させています。線の長さや太さなどは、コメントを参考にお好みに調整してくださいませ。

好きな長さの上線をつける

上に線をつける

下線ではなく上線を表示させたい場合、さきほどのコードをほんの一部だけ変えるだけでOKです。

具体的には、さきほどの下線コードの中のbottom: -15px;の部分をtop: -15pxに変えます。これで上線になります。

上下ばさみにする

Dfafa 2

上下ばさみにしたいときには、疑似要素の::beforeと::afterを使います。

<h2>これは例文です</h2>
h2{
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}

/*上線*/
h2::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -15px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 5px;/*線の太さ*/
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/*下線*/
h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 5px;/*線の太さ*/
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

このようにborderの代わりに疑似要素を使って、好きな長さの線を表示させることができるわけですね。こちらの記事でも疑似要素による線を使った表現をいくつか紹介しています。ぜひ参考にしてみてください。各コード例は別々に使うCSSです。実際のページの全h2へ適用したくない場合は、専用クラスを付けてセレクターを絞ってください。

あわせて読みたいCSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選