【CSS】丸（円）の作り方｜border-radius・clip-path・画像トリミング・アニメーションまで

CSSで丸（円）を作る方法を網羅的に解説します。

基本のborder-radius: 50%から、clip-pathによる切り抜き、画像の円形トリミング、テキスト入り円、半円・四分円、アニメーション、プログレスバーまで、実務で使える10パターンをサンプル付きで紹介します。

基本：border-radius: 50% で丸を作る

CSSで丸を作る最もシンプルな方法は、正方形の要素にborder-radius: 50%を指定することです。

HTML

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

CSS

.circle {
    width: 80px;
    height: 80px;
    background: #3498db;
    border-radius: 50%;
}

表示結果

border-radius: 50%は四隅すべてを要素サイズの50%で丸めるため、正方形が正円になります。

border-radius の値による違い

値	効果	正方形への適用結果
50%	要素サイズの半分で角丸	正円
9999px	十分に大きな値で角丸	正円（50%と同じ結果）
25%	要素サイズの1/4で角丸	角丸の四角形
50% / 30%	水平/垂直を別々に指定	楕円

正方形を保証する方法（aspect-ratio）

幅だけ指定して高さを自動計算させたい場合、aspect-ratioを使うと確実に正方形を維持できます。

.circle-responsive {
    width: 80px;
    aspect-ratio: 1 / 1;  /* 幅と高さを1:1に固定 */
    background: #e74c3c;
    border-radius: 50%;
}

aspect-ratio: 1 / 1を指定すれば、heightを書かなくても正方形になります。レスポンシブデザインでwidth: 10vwのように可変幅にしても正円が保たれます。

clip-path: circle() で丸を作る

clip-pathプロパティを使えば、要素を円形に切り抜くことができます。

.circle-clip {
    width: 80px;
    height: 80px;
    background: #2ecc71;
    clip-path: circle(50%);
}

border-radius と clip-path の違い

比較項目	border-radius: 50%	clip-path: circle()
仕組み	角を丸める	領域を切り抜く
ボーダー	円形のボーダーを表示可能	切り抜かれてボーダーが見えない
box-shadow	円形の影が出る	影も切り抜かれる
クリック領域	矩形のまま（四隅も反応）	円形のみ反応
アニメーション	border-radius の遷移	circle() の半径を遷移可能
ブラウザ対応	IE11含め全対応	IE非対応

画像を円形にトリミングする

プロフィール画像やアバターを円形に表示する方法です。object-fit: coverと組み合わせることで、元画像の縦横比に関係なく正円に収まります。

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;        /* アスペクト比を維持して切り抜き */
    object-position: center;  /* 中央を基準にトリミング */
}

<img src="photo.jpg" alt="プロフィール" class="avatar">

object-fit の値	効果
cover	アスペクト比を維持し、要素全体を埋める（はみ出し部分は切り抜き）
contain	アスペクト比を維持し、要素内に収める（余白ができる）
fill	要素サイズに引き伸ばす（変形する）

円形画像の詳しい実装は「【CSS】角丸画像のトリミングはobject-fitで一行解決！」で解説しています。

テキスト入りの丸を作る

円の中にテキストを配置する場合、Flexboxで上下左右中央揃えにします。

.circle-text {
    width: 60px;
    height: 60px;
    background: #9b59b6;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

<div class="circle-text">CSS</div>

テキスト量に応じて可変サイズにする

テキストの長さに合わせて円のサイズを変えたい場合、paddingを使います。

.circle-auto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 10px;
    background: #e67e22;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    aspect-ratio: 1 / 1;
}

aspect-ratio: 1 / 1とmin-width/min-heightを組み合わせることで、テキストが増えても常に正円を維持します。

枠線だけの丸（アウトライン円）

背景なしで枠線だけの円を作る方法です。

/* border で枠線だけの円 */
.circle-outline {
    width: 80px;
    height: 80px;
    border: 3px solid #3498db;
    border-radius: 50%;
    background: transparent;
}

/* box-shadow で枠線を表現（要素サイズに影響しない） */
.circle-shadow {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #e74c3c;
}

/* outline で枠線（レイアウトに影響しない） */
.circle-outline-alt {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    outline: 3px solid #2ecc71;
    outline-offset: -3px;
}

方法	レイアウトへの影響	特徴
border	要素サイズに加算（box-sizing: content-boxの場合）	最も一般的。色・太さ・スタイルを指定可能
box-shadow	影響しない	複数の円を重ねられる。spread-radiusで太さ指定
outline	影響しない	フォーカス表示にも使える。offset で位置調整可能

半円・四分円・楕円を作る

border-radiusの個別指定やサイズの調整で、さまざまな円の派生形状を作れます。

半円

/* 上半円 */
.semicircle-top {
    width: 80px;
    height: 40px;  /* 高さを半分に */
    background: #3498db;
    border-radius: 80px 80px 0 0;  /* 上側だけ角丸 */
}

/* 左半円 */
.semicircle-left {
    width: 40px;
    height: 80px;
    background: #e74c3c;
    border-radius: 80px 0 0 80px;
}

半円の詳しい実装は「【CSS】半円を作る方法」をご覧ください。

四分円（クォーターサークル）

.quarter-circle {
    width: 80px;
    height: 80px;
    background: #f39c12;
    border-radius: 80px 0 0 0;  /* 左上だけ角丸 */
}

border-radiusの四隅指定については「【CSS】border-radiusで要素の上だけを角丸にする方法」で解説しています。

楕円

.ellipse {
    width: 120px;
    height: 60px;
    background: #1abc9c;
    border-radius: 50%;  /* 長方形に50%で楕円になる */
}

長方形にborder-radius: 50%を指定すると楕円になります。

円形バッジ・通知アイコン

通知数やステータスを表示する円形バッジの作り方です。

.badge-container {
    position: relative;
    display: inline-block;
}
.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e74c3c;
    border-radius: 10px;  /* 高さの半分で丸みを付ける */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="badge-container">
  <button>通知</button>
  <span class="badge">3</span>
</div>

border-radiusを高さの半分に設定すると、1桁でも3桁でもカプセル型を保ちます。min-widthとpaddingで最低サイズを保証するのがポイントです。

円形リスト番号（CSSカウンター）

counter-incrementと::before擬似要素を組み合わせて、自動的に番号が振られる円形リストを作れます。

.circle-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
}
.circle-list li {
    counter-increment: step;
    margin-bottom: 12px;
    padding-left: 44px;
    position: relative;
    line-height: 32px;
}
.circle-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    width: 32px;
    height: 32px;
    background: #3498db;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

グラデーション円・円形プログレスバー

conic-gradient（円錐グラデーション）を使えば、円形のプログレスバーを作れます。

グラデーション円

.circle-gradient {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

グラデーションの詳細は「【CSS】グラデーションを作成する方法」で解説しています。

円形プログレスバー（conic-gradient）

.progress-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 75%の進捗を表現 */
    background: conic-gradient(
        #3498db 0deg 270deg,   /* 75% = 360° × 0.75 = 270° */
        #ecf0f1 270deg 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 内側の白い円で「リング」にする */
.progress-ring::after {
    content: "75%";
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #3498db;
}

進捗率をCSS変数で管理すると、JavaScriptからの動的更新が容易になります。

.progress-ring {
    --progress: 75;
    background: conic-gradient(
        #3498db 0deg calc(var(--progress) * 3.6deg),
        #ecf0f1 calc(var(--progress) * 3.6deg) 360deg
    );
}

パルスアニメーション

円が脈打つように拡大縮小するアニメーションです。通知アイコンやボタンの強調に使えます。

.circle-pulse {
    width: 60px;
    height: 60px;
    background: #e74c3c;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(231, 76, 60, 0);
    }
}

レスポンシブな円（vw / clamp）

画面幅に応じてサイズが変わる円を作る場合、vw単位やclamp()関数を使います。

/* 画面幅の10%の円 */
.circle-vw {
    width: 10vw;
    aspect-ratio: 1 / 1;
    background: #3498db;
    border-radius: 50%;
}

/* 最小40px〜最大120pxの範囲で可変 */
.circle-clamp {
    width: clamp(40px, 10vw, 120px);
    aspect-ratio: 1 / 1;
    background: #2ecc71;
    border-radius: 50%;
}

方法	メリット	デメリット
width: 80px	固定サイズで安定	レスポンシブ非対応
width: 10vw	画面幅に連動	極端に大きく/小さくなる可能性
clamp(40px, 10vw, 120px)	最小・最大値で安全に可変	IE非対応
width: 10%	親要素基準で可変	親のサイズに依存

CSS vs SVG：円の使い分け

CSSとSVGのどちらで円を描くべきか、用途別に整理します。

用途	CSS	SVG
装飾的な背景円	◎	○
プロフィール画像の切り抜き	◎	△
バッジ・通知アイコン	◎	○
円グラフ・データ可視化	△（conic-gradient）	◎
アニメーション付き円	○	◎
アクセシビリティ	△（装飾のみ）	◎（role, aria-label対応）
印刷品質	○	◎（ベクター）

まとめ

CSSで円を作る方法を用途別に整理します。

用途	推奨手法	ポイント
基本的な円	border-radius: 50%	width = height を揃える
正方形の保証	aspect-ratio: 1 / 1	可変幅でも正円を維持
クリック領域も円形に	clip-path: circle()	四隅がクリックに反応しない
画像の円形トリミング	border-radius + object-fit: cover	object-positionで位置調整
テキスト入り円	Flexbox中央揃え	aspect-ratioで可変サイズ対応
枠線だけの円	border / box-shadow / outline	用途に応じて使い分け
半円・四分円	border-radiusの個別指定	サイズを半分に調整
バッジ	border-radius + position: absolute	min-widthで最小サイズ保証
プログレスバー	conic-gradient + ::after	CSS変数でJS連携が容易
パルスアニメーション	@keyframes + box-shadow	scaleとbox-shadowの組合せ

関連記事

• 【CSS】border-radiusで要素の上だけを角丸にする方法
• 【CSS】半円を作る方法
• 【CSS】角丸画像のトリミングはobject-fitで一行解決！
• 【CSS】object-fitとobject-positionで画像の表示位置を自在に調整する方法
• 【CSS】グラデーションを作成する方法
• 【CSS】角丸三角形を作る方法