角丸で円を描く

CSS3の角丸で角度を50%にすると円を描くことができる。 指定の方法は次のとおり。 border-radius: 50%;

サンプル 次のCSSとHTMLで試してみた。

CSS

#season ul, #season li {
 list-style: none;
}
#season a {
 text-decoration: none;
 outline: 0;
}
/*コンテンツを内包する要素*/
#season {
 position: absolute;
 width: 550px;
 height: 500px;
}
/*ナビゲーションボタン共通スタイル*/
#season_nav li a {
 position: absolute;
 display: block;
 width: 170px;
 height: 120px;
 font-size: 40px;
 font-weight: bold;
 color: #000;
 text-align: center;
 padding-top: 50px;
 border: 5px solid #6c7376;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%; 
behavior: url(http://sample.com/HTML5/PIE.htc); 
}
/*ナビゲーションボタン個別スタイル*/
#season_nav li:nth-child(1) a {
 top: 12%;
 left: 6%;
 background: url(http://sample.com/wp-content/uploads/img/season/sakura.jpg) repeat center center;
}
#season_nav li:nth-child(2) a {
 bottom: 11%;
 left: 14%;
 background: url(http://sample.com/wp-content/uploads/img/season/himawari.jpg) repeat center center;
}
/*ナビゲーションボタンロールオーバー*/
#season_nav li:nth-child(1) a:hover {
 color: #ff0;
 border-color: #ff0;
}
#season_nav li:nth-child(2) a:hover {
 color: #f06;
 border-color: #f06;
}

HTML

<body>
<div id="season">
	<ul id="season_nav">
		<li><a href="#">春</a></li>
		<li><a href="#">夏</a></li>
	</ul>
</div>
</body>

サンプルは「季節の便り」を参照