border-radius の実験

角丸の実験。CSS3のborder-radiusを使用します。

基本的な使い方

kadomaru01
border-radius の値は、角丸の直径になるようです。

角丸から文字をはみ出させる実験1

kadomaru02
padding をなくして border-radius を多めにとった。
要素は角丸の外側へはみ出すことができるようだ。

角丸から文字をはみ出させる実験2

kadomaru03
padding をなくして border-radius を多めにとって、さらに overflow:hidden; を足した。
これはブラウザによって解釈が変わった。Firefox では overflow はあくまで矩形で解釈され、角丸の外にはみ出すことができるのに対し、WebKit系(Safari/Chrome) では角丸の外にはみ出せないものとして解釈される。

4つの角を個別に指定する実験

kadomaru04
border-radius に4つの値を与えてみた。
左上、右上、右下、左下の順に個別に指定できるようだ。ただし、これができたのはFirefoxのみで、WebKit系(Safari/Chrome) では無視される(角丸にならない)。