CSS - border-radius
概要
属性名 | border-radius |
---|---|
値 | <radius> [ / <radius> ]? |
値の詳細 | <radius> = [<length> | <percentage>]{1,4} |
初期値 | 個々の属性を参照 |
適用可能要素 | すべて |
継承 | 継承しない |
メディア | visual |
アニメーション | 個々の属性を参照 |
サポート (説明)
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 9 | 1(-moz) 4 | 1(-webkit) 5 | 11.5 | 3.1(-webkit) 5.1 |
説明
角の丸いボーダーラインを描画します。
値 | 説明 |
---|---|
<length> | 角の丸い部分の半径を長さで指定します。 |
<percentage> | 角の丸い部分の半径をパーセントで指定します。 |
値を 4つ指定した場合、それぞれは、左上、右上、右下、左下に適用されます。左下を省略すると右上と同じ値になります。右下を省略すると左上の同じ値になります。右上を省略すると左上と同じ値になります。
/* 左上=右上=右下=左下=10px */ border-radius: 10px; /* 左上=右下=10px、右上=左下=20px */ border-radius: 10px 20px; /* /* 左上=10px、右上=左下=20px、右下=30px */ border-radius: 10px 20px 30px; /* 左上=10px、右上=20px、右下=30px、左下=40px */ border-radius: 10px 20px 30px 40px;
スラッシュ(/)で区切った値を指定すると、丸の代わりに楕円が適用され、/ よりも前の部分が楕円の横半径、/ よりも後の部分が楕円の縦半径を示します。
/* 左上:1×5px、右上:1×5px、右下:1×5px、左下:1×5px */ border-radius: 1px / 5px; /* 左上:1×5px、右上:2×6px、右下:3×7px、左下:4×8px */ border-radius: 1px 2px 3px 4px / 5px 6px 7px 8px;
使用例
CSS
.test { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 6px solid red; background-color: #cc9999; height: 32px; width: 120px; }
HTML
<div class="test"></div>
表示
参考
関連項目
border-spacing, border-radius, border-image, box-shadowリンク
- http://www.w3.org/TR/css3-background/#corners
- https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
- http://caniuse.com/#feat=border-radius
Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年1月3日
https://www.tohoho-web.com/css/prop/border-radius.htm