CSSで半円を作る方法｜border-radiusとclip-pathの使い分け

CSSで半円を作る方法は、主に border-radius で角を丸める方法と、clip-path で円の一部を切り抜く方法があります。単純な装飾なら border-radius、斜めや複雑な切り抜きも含めて制御したいなら clip-path が向いています。

先に結論
上半円・下半円・左半円・右半円を作るだけなら、幅と高さの比率を2:1または1:2にして、border-radius を片側だけ大きく指定するのが一番扱いやすいです。

半円を作る基本の考え方
上下左右の半円パターン
コピペ用の最小コード
レスポンシブな半円にする
clip-pathで半円を作る
疑似要素で半円の装飾を付ける
ボタンやカードの装飾に使う例
border-radiusとclip-pathの使い分け
よくある崩れ方と対処
まとめ
参考

半円を作る基本の考え方

半円は「円を半分だけ見せる」形です。CSSでは、要素の幅・高さを決めてから、表示したい辺の角だけを丸めると作れます。たとえば上半円なら、幅を高さの2倍にして、上側2つの角を大きく丸めます。

half-circle-base.html

<div class="half-circle top"></div>

top-half-circle.css

.half-circle.top {
  width: 160px;
  height: 80px;
  background: #2f80ed;
  border-radius: 160px 160px 0 0;
}

円や角丸の基本は CSSで丸（円）を作る方法も参考になります。半円はその応用で、丸める角を片側に限定したものです。

上下左右の半円パターン

向きが違うだけなら、幅・高さ・border-radius の指定を変えるだけで対応できます。上下は横長、左右は縦長にすると自然な半円になります。

half-circle-directions.html

<div class="semi semi-top"></div>
<div class="semi semi-bottom"></div>
<div class="semi semi-left"></div>
<div class="semi semi-right"></div>

half-circle-directions.css

.semi {
  background: #16a085;
  margin: 12px;
}

.semi-top,
.semi-bottom {
  width: 160px;
  height: 80px;
}

.semi-left,
.semi-right {
  width: 80px;
  height: 160px;
}

.semi-top {
  border-radius: 160px 160px 0 0;
}

.semi-bottom {
  border-radius: 0 0 160px 160px;
}

.semi-left {
  border-radius: 160px 0 0 160px;
}

.semi-right {
  border-radius: 0 160px 160px 0;
}

コピペする時の基準
上半円・下半円は width: 160px; height: 80px;、左半円・右半円は width: 80px; height: 160px; のように、長い辺を直径として考えると失敗しにくいです。

コピペ用の最小コード

まず形だけ作りたい場合は、次のCSSだけで十分です。色やサイズは変数にしておくと、複数箇所で使い回しやすくなります。

copy-paste-half-circle.css

.half-circle {
  --semi-width: 160px;
  --semi-color: #2f80ed;

  width: var(--semi-width);
  height: calc(var(--semi-width) / 2);
  background: var(--semi-color);
  border-radius: 999px 999px 0 0;
}

copy-paste-half-circle.html

<div class="half-circle"></div>

レスポンシブな半円にする

固定ピクセルではなく画面幅に合わせたい場合は、aspect-ratio を使うと比率を保ちやすくなります。上半円・下半円は aspect-ratio: 2 / 1、左半円・右半円は aspect-ratio: 1 / 2 が基本です。

responsive-half-circle.css

.responsive-semi {
  width: min(60vw, 240px);
  aspect-ratio: 2 / 1;
  background: #e67e22;
  border-radius: 999px 999px 0 0;
}

border-radiusは大きめでよい
999px のように十分大きい値を指定すると、要素サイズが変わっても半円を保ちやすくなります。カードやボタンなど、サイズが変わるUIではこの書き方が便利です。

clip-pathで半円を作る

clip-path は、要素の表示範囲を切り抜くCSSプロパティです。背景画像やグラデーションを半円状に切り抜きたい場合、または斜めのカットと組み合わせたい場合に向いています。

clip-path-half-circle.css

.clip-semi {
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, #8e44ad, #3498db);
  border-radius: 50%;
  clip-path: inset(0 0 50% 0);
}

この例では、まず正円を作り、下半分を clip-path: inset(0 0 50% 0) で隠しています。CSSの切り抜き仕様は MDNのclip-pathリファレンスが参考になります。

疑似要素で半円の装飾を付ける

見出しやカードの背景に半円を置きたい場合は、HTMLを増やさずに ::before や ::after で作ると管理しやすいです。装飾用の半円は本文より背面に置き、pointer-events: none を付けてクリックを邪魔しないようにします。

pseudo-element-half-circle.css

.heading-badge {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.6em;
  z-index: 0;
}

.heading-badge::before {
  content: "";
  position: absolute;
  left: -0.4em;
  bottom: 0;
  width: 1.6em;
  height: 0.8em;
  background: #f1c40f;
  border-radius: 1.6em 1.6em 0 0;
  z-index: -1;
  pointer-events: none;
}

疑似要素を使った図形は、CSSでバツ（×）マークを作る方法のような装飾パターンにも応用できます。

ボタンやカードの装飾に使う例

半円は、ボタンの端、カードの見出し、背景のアクセントにも使えます。装飾として使う場合は、本文やリンクの上に重ならないように、疑似要素を背面に配置します。

half-circle-card-decoration.html

<section class="feature-card">
  <h2>Feature</h2>
  <p>半円を背景アクセントとして使う例です。</p>
</section>

half-circle-card-decoration.css

.feature-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.feature-card::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 0;
  width: 120px;
  height: 60px;
  background: #dff3ff;
  border-radius: 0 0 120px 120px;
  z-index: -1;
}

影を付けて浮かせたい場合は、CSSで透過画像に影をつける方法の考え方も応用できます。ただし半円自体が単純な要素なら、まずは box-shadow で十分です。