CSS Reference

circle()

CSS で円を描く

circle() 関数は、基本シェイプ関数と呼ばれる CSS 関数で、CSS を利用して円を描くことに利用できます。

基本シェイプ関数の値となる <basic-shape> データ型は、clip-path、shape-outside、offset-path の各プロパティで使用されます。

circle() 関数をはじめ、基本シェイプ関数には下記のようなものが挙げられます。

これらの CSS 関数を使って、CSS で図形を簡単に定義することが可能です。

詳細説明

circle() 関数の基本的な構文は下記のようになります。

<circle()> = circle(
  <radial-size>?
  [ at <position> ]?
)

<radial-size>

<radial-size> は下記のように定義されています。

<radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

つまり、<length> もしくは <percentage> 値、あるいは <radial-extent> が指定可能となります。

<radial-extent> は、下記のいずれかのキーワードになります。

closest-side シェイプの中心に最も近い、参照ボックスの辺と正確に一致するようにサイズが設定されます。
farthest-side シェイプの中心に最も遠い、参照ボックスの辺と正確に一致するようにサイズが設定されます。
closest-corner 参照ボックスの中心に最も近い角を通過するようにサイズが設定されます。
farthest-corner 参照ボックスの中心に最も遠い角を通過するようにサイズが設定されます。

<position>

<position> は background-position プロパティでも使用される、位置を表すキーワード、もしくは <length>、<percentage> 値が指定できます。

指定可能なキーワードとしては、left、center、right、top、bottom などで、省略された場合は center として扱われます。

<position> を指定する場合は、at を <radial-size> の指定との間に記述します。

circle()のサンプルソース

.example01 {
  clip-path: circle(50px);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
.example02 {
  clip-path: circle(6rem at right center);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
.example03 {
  clip-path: circle(closest-side at 5rem 6rem);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
img {
  shape-outside: circle(50%);
  float: left;
  margin: 20px;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome