» CSSのみで角丸を表現CSS TIPS with WebCreativePark

WEBサイトを作成する際に手間になってくる角丸での表現ですが、画像を使わずにCSSのみで表現する方法があります。

表示サンプル

HTML+CSSソース
(HTMLソースとCSSソースを分離して書くと分かりにくいのでインラインstyleで書いています)

<div style="background:red;color:white">
	<div style="background:white">
		<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;"></div>
		<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;"></div>
		<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;"></div>
		<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;"></div>
	</div>
	<p style="padding:2px;">
		本文本文本文本文本文本文本文本文本文本文<br />
		本文本文本文本文本文本文本文本文本文本文
	</p>
	<div style="background:white">
		<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;"></div>
		<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;"></div>
		<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;"></div>
		<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;"></div>
	</div>
</div>

マージン値で角がスムーズになるような余白をつくり、height:1px;overflow: hidden;で高さを1pxにします。

ただし、XHTMLソースがかなりきたくなるので実際に使用するのはお勧めできません。

jsライブラリのcurvyCornersなどを使った方法がお勧めです。