CSSを使用した括弧の作り方

更新日2026/09/22

「」［］（）｛｝〈〉【】といった括弧をCSSで表示するためのコードメモです。content・border・mask-imageの3つのプロパティを使って状況に応じて使い分けます。

content プロパティを使用

もっともシンプルなのが、::before、::after といった疑似要素の content に括弧の文字そのものを指定する方法です。

contentの中身を変えるだけであらゆる種類の括弧に対応できますが、フォントに依存するため、線の太さや形を細かく調整したい場合には不向きです。

CSSで形を作るのが難しい場合こちらの方法が便利ですが、ディテールにこだわる場合は画像を使用しましょう。

サンプル

{}カッコの文字を使って全体を囲みます。
HTML・CSSコード
HTML
<p class="kakko-content">contentを使って{}で全体を囲みます。</p>
CSS
.kakko-content {
  position: relative;
  display: inline-block;
  padding: 0 0.8em;
}
.kakko-content::before,
.kakko-content::after {
  font-size: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.kakko-content::before {
  content: "{";
  left: 0;
}
.kakko-content::after {
  content: "}";
  right: 0;
}

contentの「「」」の部分を「（」「）」や「｛」「｝」に変更するだけで、他の括弧にも流用できます。位置調整が必要なければ、position: absolute; や transform などは不要です。

border プロパティを使用

広告

「」カギカッコや［］大カッコ（角カッコ）は border を使って表現することができます。

こちらも疑似要素を使用してカッコ要素を作り、position で位置調整できるようにしています。borderプロパティを使用する場合は、必要な分だけ border を設定し、大きさは width と height で調整します。

太さ・色・線種（実線／点線／二重線）を自由に変更できます。

カギ括弧「」

サンプル

borderでカギカッコ。
HTML・CSSコード
HTML
<p class="kakko-kagi">borderでカギカッコ。</p>
CSS
.kakko-kagi {
  position: relative;
  display: inline-block;
  padding: 0 0.6em;
}
.kakko-kagi::before,
.kakko-kagi::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.6em;
  height: 100%;
  box-sizing: border-box;
}
.kakko-kagi::before {
  left: 0;
  border-left: 4px solid #333;
  border-top: 2px solid #333;
}
.kakko-kagi::after {
  right: 0;
  border-right: 4px solid #333;
  border-bottom: 2px solid #333;
}

大括弧［］

サンプル

borderで大カッコ。 []カッコをCSSで作って全体を囲みます。テキストが増えたらその分カッコも伸びます。
テキストテキストテキストテキストテキストテキストテキストテキスト
HTML・CSSコード
HTML
<p class="kakko-square">borderで大カッコ。</p>
CSS
.kakko-square {
  position: relative;
  display: inline-block;
  padding: 0 0.6em;
}
.kakko-square::before,
.kakko-square::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.4em;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #333;
}
.kakko-square::before {
  left: 0;
  border-right: none;
}
.kakko-square::after {
  right: 0;
  border-left: none;
}

テキストの行数によって大きさを変化させるために、height を「%」で指定しています（可変タイプ）。逆にheightを1.5emのような固定値にすると、常に同じ大きさの括弧になります（固定タイプ）。

箇条書き（リスト）への応用

サンプル

  • リスト1
  • リスト2
  • リスト3
HTML・CSSコード
HTML
<ul class="kakko-list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
CSS
.kakko-list {
  position: relative;
  padding-left: 1.2em;
}
.kakko-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.4em;
  height: 100%;
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  box-sizing: border-box;
}

テキストの行数によって大きさを変化させるために、height を「%」で指定しています（可変タイプ）。逆にheightを1.5emのような固定値にすると、常に同じ大きさの括弧になります（固定タイプ）。

丸括弧（）

サンプル

borderで丸括弧。
HTML・CSSコード
HTML
<p class="kakko-round">borderで丸括弧。</p>
CSS
.kakko-round {
  position: relative;
  display: inline-block;
  padding: 0 0.8em;
}
.kakko-round::before,
.kakko-round::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.5em;
  height: 100%;
  border: 3px solid #333;
  box-sizing: border-box;
}
.kakko-round::before {
  left: 0;
  border-right: none;
  border-radius: 50% 0 0 50% / 50% 0 0 50%;
}
.kakko-round::after {
  right: 0;
  border-left: none;
  border-radius: 0 50% 50% 0 / 0 50% 50% 0;
}

border-radiusを左右非対称に指定することで、丸みのある括弧の形にしています。

山括弧〈〉

border方式の応用で、四角形の角を斜めに回転させることで山形の線を表現します。

広告

サンプル

borderを使って山カッコ
HTML・CSSコード
HTML
<p class="kakko-dotted">borderでカギカッコ</p>
CSS
.kakko-angle {
  font-size: 20px;
  position: relative;
  display: inline-block;
  padding: 0 1em;
}
.kakko-angle::before,
.kakko-angle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.8em;
  height: 0.8em;
  border-top: 3px solid #333;
  border-left: 3px solid #333;
  box-sizing: border-box;
}
.kakko-angle::before {
  left: 0.1em;
  transform: translateY(-50%) rotate(-45deg);
}
.kakko-angle::after {
  right: 0.1em;
  transform: translateY(-50%) rotate(135deg);
}

線種バリエーション

border-styleを変えれば見た目のバリエーションを増やせます。

サンプル

bordeを点線にしてカギカッコ。

サンプル

borderを二重線にしてカギカッコ。

サンプル

borderを破線にしてカギカッコ。
HTML・CSSコード
HTML
<p class="kakko-dotted">borderでカギカッコ。</p>
CSS
.kakko-dotted {
  position: relative;
  display: inline-block;
  padding: 0 0.6em;
}
.kakko-dotted::before,
.kakko-dotted::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.6em;
  height: 100%;
  box-sizing: border-box;
}
.kakko-dotted::before {
  left: 0;
  border-left: 2px dotted #333;
  border-top: 2px dotted #333;
}
.kakko-dotted::after {
  right: 0;
  border-right: 2px dotted #333;
  border-bottom: 2px dotted #333;
}

dotted を、 double や dashed にすれば線の種類を変えられます。

mask-image プロパティを使用

親子要素を作ってそれぞれに背景をつけることで【】のような括弧を作ることもできます。線ではなく面としての括弧を表現する方法です。

隅付き括弧【】

実際の「【】」は、縦長の長方形の内側の辺だけが楕円状に凹んだ、レンズのような形をしています。この凹みはborderやborder-radiusでは表現できないため、mask-image（radial-gradientで楕円を指定し、その内側を透明にする）を使って、長方形の一部をくり抜く形で再現しています。

サンプル

この【】はテキスト。周りはCSSで作成
HTML
<p class="kakko-sumi"><span>この【】はテキスト。周りはCSSで作成</span></p>
CSS
.kakko-sumi {
  position: relative;
  display: inline-block;
  padding: 0 0.7em;
}
.kakko-sumi::before,
.kakko-sumi::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.4em;
  height: 100%;
  background: #333;
}
.kakko-sumi::before {
  left: 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 100% 50%, transparent 65%, black 66%);
          mask-image: radial-gradient(ellipse 75% 70% at 100% 50%, transparent 65%, black 66%);
}
.kakko-sumi::after {
  right: 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 0% 50%, transparent 65%, black 66%);
          mask-image: radial-gradient(ellipse 75% 70% at 0% 50%, transparent 65%, black 66%);
}

::before（左側）と::after（右側）で、それぞれbackground: #333の縦長バーを作ります。これが括弧の土台です。 mask-imageにradial-gradientで楕円を指定します。楕円のtransparent（透明）になっている範囲が、バーから実際にくり抜かれます。 楕円の中心位置はat 100% 50%（左側バーは右端の中央）／at 0% 50%（右側バーは左端の中央）にして、内側の辺だけを凹ませています。

radial-gradient(ellipse [横の比率] [縦の比率] at ...)の数値を変えることで、凹みの形を調整できます。

縦の比率を上げる（例：63% → 70%）ほど、上下のキャップ部分が細くなります。 横の比率を上げるほど、凹みが深くなり、バー全体が細く見えます。 transparent 65%, black 66%の2つの数値は境界のぼかし具合です。差を大きくする（例：transparent 60%, black 70%）と輪郭がやわらかく、差を小さくする（transparent 65%, black 66%のまま）とシャープな境界になります。

mask-imageはSafariでは-webkit-mask-imageが必要です。

縦の比率をむやみに上げすぎる（目安として70%を超えるあたりから）と、上下のキャップ部分が繋がらずに途切れて見えることがあります。細くしすぎに注意し、調整する際は、実際の表示を都度確認しながら数値を変えてみてください。

広告

カテゴリー : HTML-CSS

HTML-CSS関連の記事