CSSで円(丸)を生成

CSSの「border-radius」を利用することで色々な円(丸)を作成することが出来ます。
当ページでは、実際に見ながら「正円」「楕円」「半円」「たまご形」を作成できます。角度や色・グラデーションを使用したデザインが指定できます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box" id="makeImg">
</div>

<style type="text/css">
.box {
  margin       : auto;
  overflow     : hidden;
  position     : relative;
                              /* 図形のCSS */
  width        : 120px;
  height       : 180px;
  background   : linear-gradient(to bottom, #99ccff, #0059b3);
  border-radius: 50%/65% 65% 35% 35%;
}
</style>