CSS - border-*-*-radius

トップ > CSSリファレンス > border-*-*-radius

概要

属性名
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
[<length> | <percentage>]{1,2}
初期値0
適用可能要素すべて
継承継承しない
メディアvisual

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS391(-moz)
4
1(-webkit)
5
11.53.1(-webkit)
5.1

説明

角の丸いボーダーラインの左上、右上、右下、左下の半径を個別に指定します。詳細は border-radius も参照してください。

説明
<length>角の丸い部分の半径を長さで指定します。
<percentage>角の丸い部分の半径をパーセントで指定します。

値をひとつした場合、角の丸の半径と見なされます。値をふたつ指定した場合、丸の代わりに楕円が適用され、最初の数値が楕円の横半径、後の数字が楕円の縦半径を示します。

CSS
border-top-left-radius: 10px;					/* 左上:10×10pxの円 */
border-top-left-radius: 10px 20px;				/* 左上:10×20pxの楕円 */

使用例

CSS
.test {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
  border: 6px solid red;
  background-color: #cc9999;
  height: 32px;
  width: 120px;
}
HTML
<div class="test"></div>
表示

参考

関連項目

border-spacing, border-radius, border-image, box-shadow

リンク


Copyright (C) 1997-2016 杜甫々
初版:1997年7月27日、最終更新:2016年1月3日
http://www.tohoho-web.com/css/prop/border-x-radius.htm