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>

表示

参考

角の丸いテーブルを表示するには

リンク

初版：1997年7月27日、最終更新：2016年1月3日

https://www.tohoho-web.com/css/prop/border-radius.htm

CSS - border-radius

概要

サポート (説明)

説明

使用例

参考

関連項目

リンク