“border-top-left-radius”プロパティ:左上の角丸

概要

“border-bottom-left-radius”プロパティは左上の角丸を指定するプロパティです。

サンプルコード

div { border-top-left-radius: 20px / 20px;}


値

値の指定方法

角丸の半径は“px”、“em”などで指定した長さ、もしくはボーダー・ボックスの幅、高さに対するパーセンテージで指定します。指定した値はボーダーの外縁の半径になります。

値が一つの場合はその値が水平方向と垂直方向の両方の半径になります。

div { border-top-left-radius: 〚角丸の半径〛;}


ホワイトスペースにより区切られた2つの値は1つ目の値が水平方向の半径、2つ目の値が垂直方向の半径になります。

border-top-left-radius: 〚水平方向の半径〛 〚垂直方向の半径〛;


半径が“0”の場合は丸くない角になります。

仕様書

定義されている仕様書

border-top-left-radius

<length>
<percentage>

角丸を指定する

“<length>”値で指定する

div { border-top-left-radius: 20px 20px;}


border-top-left-radius: 20px 20px;

div { border-top-left-radius: 20px;}


border-top-left-radius: 20px;

“<percentage>”値で指定する

div { border-top-left-radius: 10% 10%;}


border-top-left-radius: 10% 10%;

div { border-top-left-radius: 10%;}


border-top-left-radius: 10%;

水平方向と垂直方向の半径をそれぞれ指定する

div { border-top-left-radius: 20px 40px;}


border-top-left-radius: 30px 10px;