border-radius

背景・装飾

要素の角を丸くするプロパティです。

構文

Syntax

border-radius: <length> | <percentage>

コード例

例 1

border-radius: 8px;

実行結果

8pxの角丸

全ての角を8pxで丸く

例 2

border-radius: 50%;

実行結果

円形

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

💡 TIPS

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

関連プロパティ

ブラウザサポート

IE9+, 全モダンブラウザ