ボーダーの角丸の値を個別に指定するには?
要素書式
- border-top-left-radius:【角丸の指定】;
- border-top-right-radius:【角丸の指定】;
- border-bottom-left-radius:【角丸の指定】;
- border-bottom-right-radius:【角丸の指定】;
対応ブラウザ
値一覧
値 | 内容 |
角丸の指定 | 各角の角丸の半径を指定します。次の2種類の方法で値を指定できます。 長さで指定:楕円の横方向と縦方向の半径を指定します。 パーセント値で指定:ボーダーボックスの横幅と高さに対する割合で楕円の横方向と縦方向の半径を指定します。 詳細は解説文をご覧ください。 |
解説文
border-*-radiusプロパティを使うと、各角の角丸を指定することができます。
border-*-radiusプロパティで指定する2つの値(長さまたはパーセント値)は、ボーダー外側の角が内接する楕円の半径となります。
一つ目の値は角丸の横方向の半径、2つ目の値は角丸の縦方向の半径を指定します。
2つ目の値が省略された場合、一つ目の値からコピーします。
2つの値のどちらか0の場合、角は丸くされず、四角形となります。
サンプルソース
<!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-top-left-radius: 100px 50px;
}
#sample2{
border-top-right-radius: 100px 50px;
}
#sample3{
border-bottom-left-radius: 100px 50px;
}
#sample4{
border-bottom-right-radius: 100px 50px;
}
</style>
</head>
<body>
<p id="sample1">左上の角丸の指定</p>
<p id="sample2">右上の角丸の指定</p>
<p id="sample3">左下の角丸の指定</p>
<p id="sample4">右下の角丸の指定</p>
</body>
</html>
関連項目