circle()

circle() は CSS の関数で、<basic-shape> データ型の一つです。

構文

css

shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

値

<shape-radius>

<length>、<percentage>、または closest-side および farthest-side の値の何れかです。

closest-side

シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。

farthest-side

シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。

<position>

円の中心を移動します。<length>、<percentage>、または left のような値の何れかです。

例

基本的な円

下の例では、shape-outside プロパティの値が circle(50%) となっており、浮動要素に円を定義して、テキストが回り込むようになっています。

仕様書

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-circle

ブラウザーの互換性

BCD tables only load in the browser

関連情報