css3 border-radius

参考サイト

CSS3 を使って円を描く

 

http://blog.toshimaru.net/157392690/

■HTML

<div class=”circle”>

</div>

 

■CSS

.circle {
background-color: #cc3;
height: 150px;
width: 150px;
borderradius:75px;
}
border-radiusの値をheightとwidthの半分の値にすれば正円になる。
イラレとおんなじ。

 

ちなみに border-radiusの値を4分の1にするとこんなになる。

 

border-radiusの使い方を徹底的に学んでみる

http://ideahacker.net/2013/05/30/5280/

 

MDN Web Docs