角丸の作成例

記事「CSSのborder-radiusで角丸に表示する方法」で紹介している書き方の表示例です。詳しくは、解説記事本文をご参照下さい。

1-1. 四隅の角をすべて丸くするborder-radiusプロパティの基礎の表示例

角を丸くしたボックスの例：半径をピクセル数で指定(20px)

角を丸くしたボックスの例：半径を文字数で指定(0.75em)

角を丸くしたボックスの例：半径を割合で指定(34%)

1-2. 枠線の引かれたボックスの角を丸くする書き方の表示例

角を丸くしたボックス＋実線の例

角を丸くしたボックス＋点線の例

1-3. 背景の塗られたボックスの角を丸くする書き方の表示例

角を丸くしたボックスの例

1-4. 画像の角を丸くカットする書き方の表示例

海の写真 ／(比較)何も装飾しない状態： 海の写真

2-1. 四隅の角を個別に丸くするborder-radius関連プロパティ4つの書き方の表示例

四隅の角を個別に丸くしたボックスの例
↖左上の半径：10px
↗右上の半径：30px
↘右下の半径：50px
↙左下の半径：70px

2-2. ボックスの上側だけ(右上の角と左上の角)を丸くしてタブのような装飾を作る方法の表示例

角丸BOX 角丸BOX 角丸BOX 角丸BOX
角丸BOX 角丸BOX 角丸BOX 角丸BOX

2-3. 対角を丸くするデザインもできるの表示例

対角だけを丸くしたボックスの例

対角だけを丸くしたボックスの例

3-1. 角丸ボタンの作り方の表示例

角丸ボタン 角丸ボタン 角丸ボタン

※グラデーションを使ったボタンの作り方の参考：テキストリンクを表面がグラデーションのボタン形状に装飾する方法

3-2. 連結ボタンの作り方の表示例

角丸ボタン角丸ボタン角丸ボタン角丸ボタン

※グラデーションを使ったボタンの作り方の参考：テキストリンクを表面がグラデーションのボタン形状に装飾する方法