Rounded Corners - 角丸
- border-radius
〔角丸プロパティの一括指定〕 - border-*-*-radius 〔角丸プロパティの個別指定〕
border-radius
角丸プロパティの一括指定
2011/12/1
border-radiusプロパティは、角丸プロパティを一括指定できるショートハンドです。 このプロパティを使用すると、簡単に角丸ボックスを作成することができます。
- デフォルト値：0
- 適用：全要素
- 継承：しない
設置サンプル
<style type="text/css">
#d_boxradius {
margin:20px; padding: 20px;
border-radius: 10px;
-o-border-radius: 10px;
-icab-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #ccc;
border: 1px solid #000;
}
</style>
<div id="d_boxradius">Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.</div>
Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.
border-*-*-radius
角丸プロパティの個別指定
2011/12/1
ボックス四隅の角丸の半径を指定することができます。
- デフォルト値：0
- 適用：全要素
- 継承：しない
値
border-top-left-radius（左上）
border-top-right-radius（右上）
border-bottom-left-radius（左下）
border-bottom-right-radius（右下）
border-top-right-radius（右上）
border-bottom-left-radius（左下）
border-bottom-right-radius（右下）
-webkit-border-top-left-radius（左上）
-webkit-border-top-right-radius（右上）
-webkit-border-bottom-left-radius（左下）
-webkit-border-bottom-right-radius（右下）
-webkit-border-top-right-radius（右上）
-webkit-border-bottom-left-radius（左下）
-webkit-border-bottom-right-radius（右下）
-moz-border-radius-topleft（左上）
-moz-border-radius-topright（右上）
-moz-border-radius-bottomleft（左下）
-moz-border-radius-bottomright（右下）
-moz-border-radius-topright（右上）
-moz-border-radius-bottomleft（左下）
-moz-border-radius-bottomright（右下）
設置サンプル
<style type="text/css">
#d_boxradius2 {
margin:20px;
padding: 5px 5px 5px 15px;
border: 1px solid #000;
border-radius-topleft: 10px;
-o-border-radius-topleft: 10px;
-icab-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
border-top-left-radius: 20px;
-o-border-top-left-radius: 20px;
-icab-border-top-left-radius: 20px;
-khtml-border-top-left-radius: 20px;
-moz-border-top-left-radius: 20px;
-webkit-border-top-left-radius: 20px;
}
#d_boxradius3 {
margin:20px;
padding: 5px 5px 5px 15px;
border: 1px solid #000;
border-radius-topright: 10px;
-o-border-radius-topright: 10px;
-icab-border-radius-topright: 10px;
-khtml-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topright: 10px;
border-top-right-radius: 10px;
-o-border-top-right-radius: 10px;
-icab-border-top-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
#d_boxradius4 {
margin:20px;
padding: 5px 5px 5px 15px;
border: 1px solid #000;
border-radius-bottomleft: 10px;
-o-border-radius-bottomleft: 10px;
-icab-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
-icab-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
#d_boxradius5 {
margin:20px;
padding: 5px 5px 5px 15px;
border: 1px solid #000;
border-radius-bottomright: 10px;
-o-border-radius-bottomright: 10px;
-icab-border-radius-bottomright: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-o-border-bottom-right-radius: 10px;
-icab-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
<div id="d_boxradius2">Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.</div>
<div id="d_boxradius3">Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.</div>
<div id="d_boxradius4">Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.</div>
<div id="d_boxradius5">Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.</div>Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.