HOME - IEでもborder-radiusっぽいことをするbehavior

IEでもborder-radiusっぽいことをするbehavior

へんじがない
ただのしかばねのようだ

特徴

IEで丸い角を表現するためにVMLのroundrectを利用します（超安直）。とりあえずCSS3で書いた（-moz-）border-radiusなスタイルシートにひとつ記述を加えるだけで使えるので、将来に禍根を残すことはないはず。画像を使う方法よりはメンテナンスが楽で、余計な要素が氾濫しているソースよりは綺麗なんじゃないかなぁ、と。新版と旧版がありますが、どちらも中途半端です。

使い方

非IE系のブラウザ用にborder-radius: npxまたは-moz-border-radius: npxを指定してあるところへ、ついでにbehavior: url(border-radius.htc)を追加して下さい。なお、あらかじめhtml要素の開始タグあたりにxmlns:v="urn:schemas-microsoft-com:vml"を書き加えておく必要があります（しなくても動作しますが）。ソースのサンプルは下の方に。

制限

backgroundやborderの指定が必須とか、（-moz-）border-radius、border-widthはpxで1値指定されていないとダメとか、入れ子にできないとか、現状では互換モードでしか動作しないとか。あと、VMLを埋め込んだHTMLがWeb標準的にどうなのかは知りません。や、書かれている内容を伝えることより角を丸くすることの方が主目的なら、図形描画のための言語であるVMLを使おう、というオチで。

スクリーンショット（IE6.0）

スクリーンショット（Fx1.0）

ソース（border-radius.html）

<html xmlns:v="urn:schemas-microsoft-com:vml">
<style type="text/css">
div.example {
  color: #fff; background: #000; padding: 1ex 1em; margin: 1ex 5%;
  border: 4px solid #0c0; -moz-border-radius: 20px; -moz-box-sizing: border-box;
  behavior: url(border-radius.htc);
}
</style>
<div class="example">へんじがない<br>ただのしかばねのようだ</div>
<div class="example" style="background-image:url(border-radius.gif)">へんじがない<br>ただのしかばねのようだ</div>
</html>

ソース（border-radius.htc）

<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
function oncontentready(classID) {
  if (!this.className.match(classID)) {
    this.className = this.className.concat(' ', classID);
    var arcSize = Math.min(parseInt(this.currentStyle['moz-border-radius'] ||
                                    this.currentStyle['border-radius']) /
                           Math.min(this.offsetWidth, this.offsetHeight), 1);
    var strokeColor = this.currentStyle.borderColor; var strokeWeight = this.currentStyle.borderWidth; this.style.border = 'none';
    var fillColor = this.currentStyle.backgroundColor; var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); this.style.background = 'transparent';
    var margin = this.currentStyle.margin; this.style.margin = '0';
    var styleFloat = this.currentStyle.styleFloat; this.style.styleFloat = 'none';
    var clear = this.currentStyle.clear; this.style.clear = 'none';
    var position = this.currentStyle.position; this.style.position = 'static';
    var left = this.currentStyle.left; this.style.left = '0';
    var right = this.currentStyle.right; this.style.right = '0';
    var top = this.currentStyle.top; this.style.top = '0';
    var bottom = this.currentStyle.bottom; this.style.bottom = '0';
    var width = this.currentStyle.width; this.style.width = '100%';
    var height = this.currentStyle.height; this.style.height = '100%';
    this.outerHTML = '<div class="' + classID + '" style="background: transparent; border: none; padding: 0; margin: ' + margin + '; float: ' + styleFloat + '; clear: ' + clear + '; position: ' + position + '; left: ' + left + '; right: ' + right + '; top: ' + top + '; bottom: ' + bottom + '; width: ' + width + '; height: ' + height + ';"><v:roundrect arcsize="' + arcSize + '" strokecolor="' + strokeColor + '" strokeweight="' + strokeWeight + '" style="behavior: url(#default#VML); width: 99%; height: 99%; antialias: true; padding: ' + strokeWeight + 'px;"><v:fill color="' + fillColor + '" src="' + fillSrc + '" type="tile" style="behavior: url(#default#VML);" />' + this.outerHTML + '</v:roundrect></div>';
  }
}
</script>

関連情報

Discuss HTML and CSS : Round Corner

Nifty Corners: rounded corners without images

適宜覚書: 角を丸めたいのは分かるが

Nifty Cornersについて考える - 徒書

IEでもborder-radiusっぽいことをするbehavior（旧版）

Mon, 20 Mar 2006