border-radius

背景・装飾

要素の角を丸くするプロパティです。4つの角を個別に指定できるほか、楕円形の角も作成可能です。円形のボタンやカードデザインに欠かせないプロパティで、単位はpx、%、emなど多様な値が使用できます。

構文

Syntax
border-radius: <length> | <percentage>
🎮

インタラクティブデモ

コントロール

16px
0px100px

プレビュー

生成されたCSS

.element { border-radius: 16px; }

コード例

例 1

border-radius: 0px;
実行結果
0px
角の丸みなし（デフォルト）

角の丸みなし（デフォルト）

例 2

border-radius: 16px;
実行結果
16px
中程度の丸み

中程度の丸み

例 3

border-radius: 50%;
実行結果
50%
完全な円形

完全な円形（正方形の場合）

💡 TIPS

カードデザインやボタンで必須のプロパティ。

関連プロパティ

ブラウザサポート

IE9+, 全モダンブラウザ