← カテゴリ一覧に戻る

角丸（border-radius）

border-radiusborder-top-left-radiusborder-top-right-radius

border-radiusは要素の角を丸めます。px・%・emなど様々な単位が使え、/を使った楕円形指定でアーモンド・しずく・ブロブ（有機的な形）など多彩な形状を作れます。

デモ：border-radius の基本値

0px
0px（角なし）
4px
4px
8px
8px
12px
12px
16px
16px
24px
24px
50%
50%（円形）
9999px
9999px（pill）

デモ：個別の角への指定

top-left のみ
上半分
円形
対角
円形
ランタン
型
楕円
ブロブ

デモ：実用的なシェイプ

border-radius: 9999px

😊

border-radius: 50%

Badge

border-radius: 4px

メッセージ💬

チャットバブル

Card

border-radius: 16px

デモ：/ 構文でブロブ（有機的形状）

静的なブロブ

アニメーションするブロブ

しずく型

卵型

コード例

/* 基本: 全角を同じ値に */
.card     { border-radius: 12px; }
.circle   { border-radius: 50%; }
.pill     { border-radius: 9999px; }

/* 各角を個別に: top-left top-right bottom-right bottom-left */
.chat-bubble {
  border-radius: 18px 18px 4px 18px;
}

/* 楕円形: 水平半径 / 垂直半径 */
.ellipse {
  border-radius: 50% / 30%;  /* 横長の楕円 */
}

/* ブロブ: 各角の水平/垂直半径を個別に */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* アニメーションするブロブ */
@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
.animated-blob {
  animation: blob-morph 6s ease-in-out infinite;
}

/* 個別プロパティ */
.custom {
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

NEW/ 構文で楕円・ブロブ・有機的な形状を作る

border-radiusの/ 構文は、各角の水平半径と垂直半径を別々に指定できます。これにより正円・楕円・しずく・ブロブ（有機的な形状）まで、CSS だけで多彩な形を表現できます。

構文の読み方：

border-radius: TL TR BR BL / TL TR BR BL

/ の前が各角の水平方向の半径、/ の後が垂直方向の半径

/* しずく型 */
.teardrop {
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
}

/* ブロブ（有機的な形） */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* アニメーションで生き生きとした印象に */
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

/* ヒーローセクションの装飾やアバターに活用 */
.hero-decoration {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  animation: morph 6s ease-in-out infinite;
}

🤖 AIプロンプトテンプレート

CSSのborder-radiusを使った角丸デザインの実装例をReact + Tailwind CSSで作成してください。

要件:
- border-radius の基本（全角丸・個別指定）
- border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius の個別指定
- 円形（border-radius: 50%）・楕円形（border-radius: 50% / 25%）の作り方
- スライダーでリアルタイムにborder-radiusを変更できるインタラクティブデモ
- カード・ボタン・アバター・バッジなど実際のUIパーツへの適用例

ユーザーが値を変えてリアルタイムで形状の変化を確認できるデモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo