ボーダーを角丸にするには？
要素書式
対応ブラウザ
値一覧
| 値 | 内容 |
| 角丸の指定 | 次の２種類の方法で値を指定できます。
長さで指定：円の半径を指定します。
パーセント値で指定：ボーダーボックスの横幅と高さに対する割合で円の半径を指定します。
詳細は解説文をご覧ください。 |
解説文
border-radiusプロパティを使うと、ボーダーの４つの角を一括で指定することができます。
指定方法は次のようになります。
- 値が１つの場合、その値がすべての角に適用されます。
- 値が２つの場合、順に左上と右下、右上と左下に適用されます。
- 値が３つの場合、順に左上、右上と左下、右下に適用されます。
- 値が４つの場合、順に左上、右上、右下、左下に適用されます。
なお、角丸を個別に指定するには、border-top-left-radius（左上）、border-top-right-radius（右上）、border-bottom-left-radius（左下）、border-bottom-right-radius（右下）を使用してください。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
p{
width:400px;
height:100px;
padding:15px;
border:solid 5px #99ffcc;
background-color:#9999ff;
}
#sample1{
border-radius: 50px;
}
#sample2{
border-radius: 25px 50px;
}
</style>
</head>
<body>
<p id="sample1">サンプル1</p>
<p id="sample2">サンプル2</p>
</body>
</html>
関連項目
