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 / Background
サポート	C3 / e9 / Fx4 / Ch4 / Op10.5 / Sa5

■ 説明

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

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

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

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

■ 使用例

スタイルシート

.sample {
    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="sample"></div>

表示

CSS - border---radius

■ 概要

■ 説明

■ 使用例