CSS3 の borderRadius で、四角から円へのモーフィング

400 x 400 の四角形なので、200 で円になると思ったら、太さのぶんを
指定した値から引いて半径にしているような感じです。

IE9 でまだテストできていません。
Opera はアニメーションしませんでした。

▼ このコードをソースコードから実行してみる

<style type="text/css">
#my_box_radius {
	width:400px;
	height:400px;

	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease;
	transition: all 5s ease;

	border:40px #000 solid;
}
</style>
<script type="text/javascript">
function my_action_radius() {

	var obj = document.getElementById("my_box_radius");
	obj.style.borderRadius = "240px";
}
</script>

<input type="button" value="実行" onclick="my_action_radius();">
<div id="my_box_radius"></div>

以下は、margin に対して指定してみたのですが、効果は太さと色に対して
現れますが、スタイルはすぐ変更されます。ただ、サイズが変更されるに従
って、点線が動く事になります。

Firefox と Chrome で点線の動き方が違います。
※ Firefox のほうが望ましい動きをします

CSS3

CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました

CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味

CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する

フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

Google ストリートビューを表示している class="gm-style"

linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)

現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述

CSS3 : box-shadow の影分身の解説

CSS で画像が立ってるような影を付けて、画像の角は丸くしておく

IE 兼用背景 Fade transition の実装

CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

CSS3 と HTML5 で実装具合の表示テスト

ブラウザ別の角丸とグラデーションの適用状態の比較画像

CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript